Lens Diaries Go Now
Glamour, Beauty, Nude, Models, Photographers

*    |  Register  


 
Go Back   Garage Glamour™ > Garage Glamour™ Main Forums > Main Community Forum
 

Main Community Forum General Modeling & Photography Forum
Adult posts prohibited!>>Please Read Our GUIDELINES before posting!

Reply
 
LinkBack Thread Tools Display Modes
How to make a hovering before and after.
Old 02-19-2008, 05:19 AM   #1 (permalink)
Free Member
 
Join Date: Aug 2006
Member GG#: 54067
Location: Los Angeles
Posts: 25
Comments: 0

Jaen_Paul is offline IP: 68.190.203.182
 
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Does anyone know how? I've seen it on websites. You know, when you have an image and when you hover your cursor over it it shows another image. Before or after. Is their a specific name for it and how is it made. Does anyone know?

Thanks

JP
  View Public Profile Send a private message to Jaen_Paul Find More Posts by Jaen_Paul
 
Re: How to make a hovering before and after.
Old 02-19-2008, 06:15 AM   #2 (permalink)
Lifetime Photographer

 
DHDSP's Avatar
 
Join Date: Apr 2005
Member GG#: 43515
Location: Grebenstein nr. Kassel
Posts: 145
Comments: 0

DHDSP is offline IP: 84.58.62.116
 
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Hi JP,

I'm not an html expert by no means - but type this into google.com "html mouse over image". Should be the first hit. I hope that's what you are after.

CU
Peter
__________________
Mae West: You only live once, but if you do it right, once is enough.
  View Public Profile Send a private message to DHDSP Find More Posts by DHDSP
 
Re: How to make a hovering before and after.
Old 02-19-2008, 09:01 AM   #3 (permalink)
Free Member

 
PhotosbyChuck's Avatar
 
Join Date: Aug 2005
Member GG#: 45340
Location: Chicago
Posts: 402
Comments: 0

PhotosbyChuck is offline IP: 68.77.146.228
 
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

It's done using Javascript or DHTML....even CSS. But perhaps the simplest way is to simply use:

<img src="normal.jpg" onmouseover="this.src='hover.jpg'" onmouseout="this.src='normal.jpg'">

Here you are telling the browser to display normal.jpg at the start, if the mouse hovers over it, to switch to hover.jpg and when the mouse leaves the hover to return to normal,jpg. If you leave out the onmouseout event, the image will change permenantly should the user hover over it.

Note that there will be a slight delay (depending on how large your image is) before hover.jpg will be displayed. To prevent this, you can preload the image in the html header. That goes a bit away from your original question, but if you Google "javascript preload images" you'll find plenty of examples.
  View Public Profile Visit PhotosbyChuck's homepage! Find More Posts by PhotosbyChuck
 
Re: How to make a hovering before and after.
Old 02-19-2008, 09:43 AM   #4 (permalink)
GWC Extraordinaire

 
The_Glamour_Spot's Avatar
 
Join Date: Dec 2004
Member GG#: 40697
Location: Houston
Posts: 1,373
Comments: 0
Send a message via MSN to The_Glamour_Spot Send a message via Yahoo to The_Glamour_Spot

The_Glamour_Spot is offline IP: 98.200.128.177
 
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

I smell a tutorial coming soon...
__________________
BobbyG

http://www.bobbygphoto.com
  View Public Profile Send a private message to The_Glamour_Spot Visit The_Glamour_Spot's homepage! Find More Posts by The_Glamour_Spot
 
Re: How to make a hovering before and after.
Old 02-19-2008, 09:51 AM   #5 (permalink)
Free Member

 
Photomart's Avatar
 
Join Date: Sep 2003
Member GG#: 36974
Location: Dallas Fort Worth
Posts: 938
Comments: 0
My Mood:

Photomart is offline IP: 76.186.39.178
 
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Here's a link to my retouching page which contains interactive rollovers (mouse-overs). http://www.martysphotography.com/retouching2/

The simple HTML code I used is very similar to the code offered above. Just paste it into your document and replace the information in blue with your own information:

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Danielle','','images/Danielle_0567.jpg',1)"><img src="images/Danielle_0567-B4.JPG" name="Danielle" width="600" height="494" border="0"></a>
  View Public Profile Send a private message to Photomart Visit Photomart's homepage! Find More Posts by Photomart
 
Re: How to make a hovering before and after.
Old 02-19-2008, 09:57 AM   #6 (permalink)
Free Member

 
PhotosbyChuck's Avatar
 
Join Date: Aug 2005
Member GG#: 45340
Location: Chicago
Posts: 402
Comments: 0

PhotosbyChuck is offline IP: 68.77.146.228
 
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Quote:
Originally Posted by Photomart View Post
Here's a link to my retouching page which contains interactive rollovers (mouse-overs). http://www.martysphotography.com/retouching2/

The simple HTML code I used is very similar to the code offered above. Just paste it into your document and replace the information in blue with your own information:

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Danielle','','images/Danielle_0567.jpg',1)"><img src="images/Danielle_0567-B4.JPG" name="Danielle" width="600" height="494" border="0"></a>
This will NOT work unless you also give him the Javascript functions you are calling in your tag. For example, MM_swapImgRestore and MM_swapImage are not standard objects.
  View Public Profile Visit PhotosbyChuck's homepage! Find More Posts by PhotosbyChuck
 
Re: How to make a hovering before and after.
Old 02-23-2008, 10:25 PM   #7 (permalink)
Free Member
 
Join Date: Aug 2006
Member GG#: 54067
Location: Los Angeles
Posts: 25
Comments: 0

Jaen_Paul is offline IP: 68.190.203.182
 
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Wow... I was under the impression that I could do it in photoshop. Thanks guys, you are all the best. I love that I can come on our site and get this wonderful feedback.

Best,

JP
  View Public Profile Send a private message to Jaen_Paul Find More Posts by Jaen_Paul
 
Reply

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are On


Sponsors


New To Site? Need Help? Photographer & Model Links
All times are GMT -5. The time now is 12:33 AM.

© 1999-2017 Garage Glamour™




Search Engine Friendly URLs by vBSEO 3.2.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94