Go Back   RetouchPRO > Business > Work/Jobs
Register Blogs FAQ Site Nav Search Today's Posts Mark Forums Read

Work/Jobs Talk about the business side of things. Advice, questions, inspiration, and moral support

Mouse-over effects, more info

Thread Tools
Old 04-08-2006, 01:11 AM
aylaah's Avatar
aylaah aylaah is offline
Senior Member
Join Date: Jan 2006
Location: Newcastle NSW Australia
Posts: 106
Mouse-over effects, more info

I'm considering putting up both a mouse over and a side by side on my website, but as a web-developer novice I am trying to find out how. I have seen a few threads where it is mentioned, and have seen it attributed to being done with Java, but how? Is there a program that does it automatically? Or is it a bit too much for a novice used to using site builders?

If you know somewhere it is in tutorial or instruction format, can you direct me? I've been searching for something but keep getting retouchers websites that use it, and have it in their descriptions for sites. I just don't get how to do it.

I was basically thinking of having a low speed/high speed split, so the mouse over would be great for high speed viewers. If I ever work out how to do it!!

Help? I promise to the one who shows me the light, complete
Reply With Quote top
Old 04-08-2006, 02:03 AM
Verywierd's Avatar
Verywierd Verywierd is offline
Senior Member
Join Date: Dec 2005
Posts: 252
I usually use Dreamweaver or Namo to do it but try this:
Reply With Quote top
Old 04-08-2006, 03:33 AM
NancyJ's Avatar
NancyJ NancyJ is offline
Senior Member
Join Date: Jun 2004
Posts: 729
Javscript rollovers are very simple...

<img src = "before.jpg" onmouseover="this.src='after.jpg'" onmouseout="this.src.'before.jpg'">

Thats all there is to it.

Just to break it down for you....

This is the HTML for an image <img src = "path/to/image.ext">
Where path/to/image.ext is the location of the image eg. images/image1.jpg

That line of code will produce an image in an html page. You have an img tag with the src (source) attribute of path/to/image.ext
Now we modify that code to change when we mouse over it.

We use the DHTML attribute, onmouseover, which does exactly what it says on the tin, the code assigned to that attribute will be executed when the user places his mouse over the image.

Now the javascript...
this.src = "path/to/other/image.ext"
very simply, this says we want to set the src attribute of this element to path/to/other/image.ext

And then we use the DHTML attribute onmouseout to change the image back to the original image when we mouse off it.


Last edited by NancyJ; 04-08-2006 at 03:43 AM.
Reply With Quote top
Old 04-08-2006, 07:56 AM
aylaah's Avatar
aylaah aylaah is offline
Senior Member
Join Date: Jan 2006
Location: Newcastle NSW Australia
Posts: 106

to both of you!
Reply With Quote top
Old 04-10-2006, 05:09 PM
Nanls's Avatar
Nanls Nanls is offline
Senior Member
Join Date: May 2005
Posts: 566

Okay, maybe I shouldn't admit this, but I look at sites and find what I like and then go look at the source code. Sometimes you can find the source of the code, like the movie slide show on that I use on my sites, which I found in this manner. There are all kinds of sites that have examples of code to use at no cost. Just search in google.

Reply With Quote top

  RetouchPRO > Business > Work/Jobs

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Thread Tools

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 Off
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
REVIEW: One-Click - Automated Instant Art Effects - Volume 1 DannyRaphael Photo-Art Resources 2 05-20-2007 01:02 PM
Artistic Edge Effects gmitchel Photo Retouching 0 11-06-2005 04:31 PM
Free Action Set for Adding Diffuse Glow and Soft Focus Effects gmitchel Photo Retouching 4 10-30-2005 12:03 PM
Mend Tool - Patron Info button error. jimlay Hidden Power Support 6 02-29-2004 12:49 PM
Mouse Chronicles Vol 29 chris h Hardware 1 11-30-2001 12:18 PM

All times are GMT -6. The time now is 04:56 AM.

Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2016, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.
Copyright © 2016 Doug Nelson. All Rights Reserved