Graphic Popups On Mouse RollOvers?

[jhale1966]

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!

[mrmagoo_83]

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.

[pauper_i]

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

[buzzweiser]

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.

[jhale1966]

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

[buzzweiser]

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