Enlarge image when mouseover

Probably the easiest solution would be to do a regular javascript image swap. Just make the two images be 'regular size' (with some extra border) and 'large size' - but actually make both the same dimensions. (Which is 223x39 pixels in my example link.)

Here's a link to my site that is using a nice JS image swap script.

http://www.heroesforlife.org/changemakers_2010_home

The key parts are this script...

     <script language="JavaScript" type="text/javascript">
     <!--//

     browserok = (((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 3)) || ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=3)));

     if(browserok)
     {
          getabagOn = new Image(223, 39);
          getabagOn.src="../_wrappers/changemakers/2010/button-getabag-on.gif";

          getabagOff = new Image(223, 39);
          getabagOff.src="../_wrappers/changemakers/2010/button-getabag-off.gif";
     }

     function mouseOn(imgName)
     {
          if(browserok)
          {
               imageOn = eval(imgName + "On.src");
               document .src=imageOn;
          }
     }

     function mouseOff(imgName)
     {
          if(browserok)
          {
               imageOff = eval(imgName + "Off.src");
               document .src=imageOff;
          }
     }

     // -->
     </script>

And the code on the IMG tags...

     <img src="../images/button-getabag-off.gif" width="223" height="39" id="getabag" name="getabag" onmouseover="mouseOn('getabag'); return true;" onmouseout="mouseOff('getabag')" />

If you look at the source on my page, you'll see how to use this with more that one image. (I also add a little script that flashes my images on pageload as a hint to users that the images do something.)

Adria Pazour:

Thank you so much for your reply, Brian. As somebody with very limited experience in Javascript, I need input on how to go about doing this. Because this is more advanced, we're considering doing the window-popup thing instead. However, I think the image mouseover looks way cooler

If you change your mind feel free to contact me. Its easier than it looks.

B

Brian Mucha:

If you change your mind feel free to contact me. Its easier than it looks.

B

Brian,

Kudos to you, always so helpful!!

I was trying to explain this to Tessa at work. Can't she just upload two sizes of image, the one she is displaying in story builder and a larger one. Then link the one in the story (smaller one) to a popup window to the larger image - wouldn't it all be in the url string, not java script?

I seem to recall seeing this and learning it awhile back, but I've never done this and I am not exactly sure how to do it.

I've never done mouseover either, just once for practice in a class.

Thanks again for always being so helpful!

Nikki

Brian Mucha:

>

Sorry pop up window is what I've always thought it was called , when a new browser window opens up w/o any tool bars or search bar, just a window with image. I've only seen them done with images. Of course now I can't think of an example of when I've seen this.

Brian Mucha:

No worries, prolly my fault. Never assume!

The pop-up is much simplier.

You could also make the big version just appear on the page when the thumbnail is moused-over, but it would get a bit more complex.

B

Are you trying to do something like this?

http://cssglobe.com/lab/tooltip/02/

If so, here are the instructions on how to do it using jQuery:

http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

Noah Cooper:

Are you trying to do something like this?

http://cssglobe.com/lab/tooltip/02/

If so, here are the instructions on how to do it using jQuery:

http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

Hah, that is too nice.

I have a script around somewhere to do nothing but that exact tooltip thing that must be 400 lines long.

B

Noah Cooper:

Are you trying to do something like this?

http://cssglobe.com/lab/tooltip/02/

If so, here are the instructions on how to do it using jQuery:

http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

Noah,

Jen and I tried this using the jquery article we used it didn't work. Do we need to declare this somehwere? Since this is a pagebuilder page using HTML?

<div class="campusHighlights"><a title="Preserve Lakota culture for the children"

<strong>

<a href="http://www.stjo.org/images/content/pagebuilder/14825.jpg" class="preview">

<img src="http://www.stjo.org/images/content/pagebuilder/14837.jpg" alt="gallery thumbnail"/></a> 

</strong></a><strong>Preserve Lakota culture for the children</strong><br />Provide boys and girls at St. Joseph&#8217;s with the powwow regalia they need to continue this important tradition! <a title="Preserve Lakota culture for the children"<a href="http://www.stjo.org/help_cpf_b" target="_self">Support our Cultural Preservation Fund</a> <span class="arrowBlue">&raquo;</span></div>

</td>

</tr>

Here is how it looks it just pulled the larger image.

Thanks for your help.