Jump to content

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!

Link to comment
Share on other sites

  • 1 month later...

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.

Link to comment
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

Link to comment
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.

Link to comment
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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.