Jump to content

Archived

This topic is now archived and is closed to further replies.

jhale1966

Graphic Popups On Mouse RollOvers?

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.