Jump to content


Photo

Graphic Popups On Mouse RollOvers?


  • Please log in to reply
5 replies to this topic

#1 jhale1966

jhale1966
  • Members
  • PipPip
  • Member
  • 19 posts

Posted 23 July 2003 - 11:53 AM

I have some graphics on a page that are kind of small. I would like a larger image of the graphic to popup when someone puts the mouse over the top of one of these graphics (w/out clicking) and then have the larger version of the graphic disappear when the mouse is rolled off.

What\'s the best way to do that in DW MX?

Thanks!

#2 mrmagoo_83

mrmagoo_83
  • Members
  • PipPip
  • Member
  • 10 posts
  • LocationFort Worth. Tx

Posted 23 September 2003 - 08:00 AM

Ok I am no expert here at all, heck I came here looking for answers.

On my page I did what you are asking via layers. This may not be the best way, so I am open to suggestions as well.

What I did was did a mouseover command that made a layer appear (the one with the bigger image), and another one kinda behind those that had a transparent image that I used a mouseover command to make the big picture disappear.

Worked for me, but my pictures are all static at the moment. They are always in the same spot on the webpage.

#3 pauper_i

pauper_i
  • Members
  • PipPipPip
  • Advanced Member
  • 59 posts
  • LocationPhoenix, AZ, USA

Posted 23 September 2003 - 08:28 AM

Here\'s a chunk of code from a working site that does exactly what you want:
The javascript for the head of the file:
   <script language="JavaScript" type="text/javascript">function canManipulateImages() {  if (document.images)    return true;  else    return false;}function loadPosterImage(imageURL) {  if (gImageCapableBrowser) {    document.imagePoster.src = imageURL;    return false;  }  else {    return true;  }}gImageCapableBrowser = canManipulateImages();// -->    </script>
And in the body of the page, the code for the thumbnail image:
<a href="MyThumb.jpg"      onmouseover="return(loadPosterImage(\'MyBigPic.jpg\'))"      onmouseout="return(loadPosterImage(\'foo.gif\'))">  <img src="MyThumb.jpg" border="0" align="top" width="71" height="72"></a>
And the code for the target image (the display area)
<a href="nextpage.htm">   <img name="imagePoster" src="foo.gif"></a>
You can have multiple thumbnail pics on the same page, no problem.
Just make sure that there is NO height or width assigned to foo.gif for the display area and it will resize dynamically to whatever image you send to it (programs like frontpage will do this automatically without asking you - it gets to be a pain in the posterior taking them out again!)

Enjoy!

D
Genius is one percent inspiration, and ninety-nine percent perspiration. [br]Thomas Alva Edison

#4 buzzweiser

buzzweiser
  • New Members
  • Pip
  • Newbie
  • 2 posts
  • LocationNashville, TN

Posted 25 September 2003 - 04:01 PM

If you\'re using Dreamweaver MX.

highlight the thumbnail then in the Title bar Menu click on WINDOW to access the \"Behavior\" panel.

Once in the Behavior panel, click the \"plus\" sign.

choose

\"Open Browser Window\"

input info from there.

This works very easily.

Hope this helps.
be gentle...I\'m a newbie to PHP and MySQL

#5 jhale1966

jhale1966
  • Members
  • PipPip
  • Member
  • 19 posts

Posted 25 September 2003 - 10:48 PM

Hey Buzzweiser, will this also make the window disappear when you roll off the original image?

#6 buzzweiser

buzzweiser
  • New Members
  • Pip
  • Newbie
  • 2 posts
  • LocationNashville, TN

Posted 26 September 2003 - 01:03 PM

No this will not make the window disappear.

By the way....the behavior is a \"mouseDown\" behavior that means the end user would have to click on the thumbnail - after which a new browser window pops up. you can set the browser window to exclude or include scroll bar, address line, tool bar, etc.

There are other behaviors out there such as \"mouseOn and mouseOff\" but you\'ll have to find these Extensions at Macromedia\'s Exchange. There are some freebies out there.

Sorry this didn\'t help
be gentle...I\'m a newbie to PHP and MySQL




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users