Hover - Images - Language.

**kirkyturky** · #1 (**permalink**) 05-18-2007, 12:12 AM

Hey.

Hmmm, what language is it where: Like you hover over an image and you can have it enlarge on the screen or something....? I see it all the time, and they usually anoy me, but now I want one!

Kirk.

~~Tom~~ · #2 (**permalink**) 05-18-2007, 07:04 AM

Not sure exactly what you mean, but I may have an idea.

One type of "hover image" is that of advertisements that popup when you draw your mouse over a double-underlined text in a web page. This is DHTML script (I hate it).

Another one, that is more user friendly, is when you draw your mouse over a hyperlink and it popups an image in a small frame, of the site it links to. One company that offers this is SnapShots. This type if mouse-over affect is more user-friendly because the user is generally given the option (in the frame itself) to TURN OFF SnapShots for the entire page.

Another one, sometimes used as basic sript (img hover), is a mouse-over/rollover affect using HTML/CSS and/or javascript. This is very easy to code in a web page. Is what happens in this script is first you insert image code, and then designate a second image as the hover afftect.

Code:

 HEAD:
<script type="text/javascript">
var a = new Image(); a.src = 'root.gif';
var b = new Image(); b.src = 'hover.gif';
var c = new Image(); c.src = 'active.gif';
</script>

BODY:
<a href="whatever" onmouseover="document.images['s1a'].src='hover.gif';"
 onmouseout="document.images['s1a'].src='root.gif';">
<img src="root.gif" name="s1a" height="50" width="50" alt="" border="0"></a>

Did this help?

**kirkyturky** · #3 (**permalink**) 05-18-2007, 11:33 AM

Hmm, I kinda got it to work thanks, but it seems to flash a few times as you hover over it?

Quote:

HEAD:
<script type="text/javascript">
var a = new Image(); a.src = 'root.gif';
var b = new Image(); b.src = 'hover.gif';
var c = new Image(); c.src = 'active.gif';
</script>

BODY:
<a href="whatever" onmouseover="document.images['s1a'].src='hover.gif';"
onmouseout="document.images['s1a'].src='root.gif';">
<img src="root.gif" name="s1a" height="50" width="50" alt="" border="0"></a>

Am I to replace 'Var A/B/C ??
And what does 's1a' mean?

Many Thanks.

Kirk

digitalpbk · #4 (**permalink**) 06-27-2007, 02:39 AM

U can always use CSS.. heres a css rollover
Hey look everybody! I'm an annoying spammer!
... i guess u can increase the size just by changing the width: and height: properties

**blueparukia** · #5 (**permalink**) 06-27-2007, 03:10 AM

Aye, CSS is the best way to go. Or a HTML rollover image. I don't have the code with me though.
________________________
This user added the following:
________________________
I'm going to disregard my own advice, and ask for similar help. This will make my site look better

but is not necessary.
Say I have an image (80*80 if it matters) with nothing on it but a "?".
I then have text (a list) on a cloumn beside the pic. When I hover over a list item (which are all hyperlinks) the image changes depending on what item youre hovering over.

Thanks for help,

BP

brian · #6 (**permalink**) 07-02-2007, 04:02 PM

Yep I would go with a css rollover...it'll be the most supported for you, and should work even when people have javascript disabled...

**kirkyturky** · #7 (**permalink**) 07-02-2007, 05:17 PM

Ahhhh, right. Well thank you. Umm, I use DreamWeaver for 'most' of my Web Stuff, - Would I have to type, or does anyone know of DreamWeavers (8) - Funtions for this?!

Lol, basically. Can DreamWeaver do this for me?!

Thanks. Kirk.

**blueparukia** · #8 (**permalink**) 07-04-2007, 07:36 AM

Dreamweaver can make a basic rollover image. Go to Insert>Interactive Image>Rollover Image

I recommend using code though, and Notepad++ as a code editor.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Register Now for FREE!
Username: Password: Confirm Password: E-Mail: Confirm E-Mail: Agree to forum rules