Enlarge image when mouseover

Adria Pazour · July 2010

In storybuilder or pagebuilder, what do I need to do to get an image to enlarge when the mouse hovers over it?

Brian Mucha · July 2010

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 · July 2010

Brian Mucha:

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.)

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

Brian Mucha · July 2010

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

Adria Pazour · July 2010

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

B

Yes, I would love and appreciate your help on this! I like hearing "easier than it looks".

Nikki Valentine Odens · July 2010

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 · July 2010

Nikki Valentine Odens:
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

>

Nikki Valentine Odens · July 2010

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 · July 2010

Nikki Valentine Odens:
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.

Ahhh, now I see. You want kind of a thumbnail that shows a much bigger full size image somewhere else. (For some reason I took mouseover to mean you wanted the image to get a bit bigger IN PLACE when you passed over it.)

If you are really doing a pop-up I wouldn't do that on mouseover, but onCLICK. There's a bazillion javascripts around to do pop-ups like that. Here's the one I've used.


<script type='text/javascript'>
     function PopDialog(URLString, winWidth, winHeight){

     var windowProperties = '';
     windowProperties = windowProperties + 'fullscreen=no,';
     windowProperties = windowProperties + 'toolbar=no,';
     windowProperties = windowProperties + 'location=no,';
     windowProperties = windowProperties + 'directories=no,';
     windowProperties = windowProperties + 'status=no,';
     windowProperties = windowProperties + 'menubar=no,';
     windowProperties = windowProperties + 'scrollbars=no,';
     windowProperties = windowProperties + 'resizable=yes,';
     windowProperties = windowProperties + 'top=50,';
     windowProperties = windowProperties + 'left=100,';
     windowProperties = windowProperties + 'width=' + winWidth + ',';
     windowProperties = windowProperties + 'height=' + winHeight;
     var win = window.open(URLString, '', windowProperties);
}
</script>

Call it like this...


<a href="images/myBigImage.jpg" onClick="PopDialog('images/myBigImage.jpg', 600, 800); return false;"><img scr="myThumbnail.gif" /></a>

Adria Pazour · July 2010

Brian Mucha:

Ahhh, now I see. You want kind of a thumbnail that shows a much bigger full size image somewhere else. (For some reason I took mouseover to mean you wanted the image to get a bit bigger IN PLACE when you passed over it.)

If you are really doing a pop-up I wouldn't do that on mouseover, but onCLICK. There's a bazillion javascripts around to do pop-ups like that. Here's the one I've used.


<script type='text/javascript'>
     function PopDialog(URLString, winWidth, winHeight){

     var windowProperties = '';
     windowProperties = windowProperties + 'fullscreen=no,';
     windowProperties = windowProperties + 'toolbar=no,';
     windowProperties = windowProperties + 'location=no,';
     windowProperties = windowProperties + 'directories=no,';
     windowProperties = windowProperties + 'status=no,';
     windowProperties = windowProperties + 'menubar=no,';
     windowProperties = windowProperties + 'scrollbars=no,';
     windowProperties = windowProperties + 'resizable=yes,';
     windowProperties = windowProperties + 'top=50,';
     windowProperties = windowProperties + 'left=100,';
     windowProperties = windowProperties + 'width=' + winWidth + ',';
     windowProperties = windowProperties + 'height=' + winHeight;
     var win = window.open(URLString, '', windowProperties);
}
</script>

Call it like this...


<a href="images/myBigImage.jpg" onClick="PopDialog('images/myBigImage.jpg', 600, 800); return false;"><img scr="myThumbnail.gif" /></a>





" (For some reason I took mouseover to mean you wanted the image to get a bit bigger IN PLACE when you passed over it.)"

Just to clarify, that is what I wanted when I began this discussion. However, Nikki is saying the window pop-up thing is much simpler.

Sorry for the confusion!

Brian Mucha · July 2010

Adria Pazour:





" (For some reason I took mouseover to mean you wanted the image to get a bit bigger IN PLACE when you passed over it.)"

Just to clarify, that is what I wanted when I began this discussion. However, Nikki is saying the window pop-up thing is much simpler.

Sorry for the confusion!

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

Noah Cooper · July 2010

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

Adria Pazour · July 2010

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 - YES! Thank you! I will look into what you gave me and update -

Brian Mucha · July 2010

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

Adria Pazour · July 2010

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

Please see attached. Thank you so much!

Message was edited by: Tessa

Nikki Valentine Odens · September 2010

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><strong>Preserve Lakota culture for the children</strong><br />Provide boys and girls at St. Joseph’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">»</span></div>

</td>

</tr>

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

Thanks for your help.

JenniferLong · October 2010

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

Okay, I tried using the image preview (jQuery tooltip), but have been unsuccessful. Am I missing something?

<strong>Give the gift culture</strong><br />

Cultural education provides the youngsters at our school with the tools to preserve their proud culture to learn about their heritage and to build a bright future. As Lakota (Sioux) elders pass on, cultural education becomes more important than ever."

<a title="Give the gift culture" href="News2?page=NewsArticle&id=6874">Watch our video</a> <span class="arrowBlue">»</span> </div>

</td>

</tr>

Thanks!

Enlarge image when mouseover

Comments

Categories