OnMouseOver?

[davidhwv]

Hi,

Apologies if HTML isn't the correct forum (JS?).

I am attempting to have an image pop up when a user rolls over a 'link' (as Netflix has, as UPS has, as Google + AVG has).

All I can find are scripts/code for image swap and button 'rollover', is there an area I'm missing?

Total script kiddy, so unless it's html or javascript, I'll be lost.

Anyone got a steer for me please?

tia, David.

[Charles]

I'm not sure exactly what you want. Please post a link to an example and point us to the exact place on the page.

[davidhwv]

Ooops... try http://www.netflix.com/BrowseSelection and you'll see when you hover on a film title, you get a 'pop up' of info on the title (pop up is probably the wrong term!).

It's that action I'm trying to incorporate when a user mouses over a word in a line of text.

[Charles]

It's done with JavaScript. Take a look under the hood to see how it is done. Also note, that because JavaScript has a nasty little habit of not actually working, the content in the pretty pop up thinggy is completely redundant. They don't use it for anything important and neither should you.

[davidhwv]

Ok... looking at that section, I see:

<img height="90" border="0" width="65" vspace="2" id="b070045848_1" onmouseover="dB(this)" style="border: 1px solid rgb(221, 221, 221);" alt="Pride and Glory" src="http://cdn-8.nflximg.com/us/boxshots/small/70045848.jpg"/>

with onmouseover="dB(this)" being the trigger for the pop up, yes?

I get your point re "JavaScript has a nasty little habit of not actually working" (it's sometimes 'slow' to react), but it's the pretty pop up thingy that I want (and not off an image, but a word in the text).

This effect has been around for a while but I've never come across any JS scripts.:confused:

[Charles]

(it's sometimes 'slow' to react), but it's the pretty pop up thingy that I want (and not off an image, but a word in the text).No, that's not what I meant. Any given piece of JavaScript doesn't work for all users. It might seem to work for you but that doesn't mean that it's working down the line. What you are seeking can be found from a careful study of that page you posted. Just be certain to follow their example and only use it for fluff. There are other ways of doing the same that don't rely so much on JavaScript and that are more suitable for general use.

[davidhwv]

Ah, point taken (and it really does need to work for every user).

So... if,

There are other ways of doing the same that don't rely so much on JavaScript and that are more suitable for general use.

then I don't want to waste time on trying to crunch JavaScript. Do you have any pointers of 'what' and 'where'? The "general use" aspect is prime (although I do think the pop up thingy is pretty!). I've tried a new window off a link but that's fairly clunky in comparison.

[donatello]

Use this very lightweight and simple CSS script! Just three lines of CSS and that's it.

Put this in your CSS:

/*---------- Easy tooltip -----------*/

.flyover a.ez:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
.flyover a.ez span {display:none; padding:2px 3px; margin-left:8px; width:300px; text-align:center;}
.flyover a.ez:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c; z-index:100;}



Then to call it:

<div class="flyover">
<a href="http://www.webdeveloper.com" title="This can be an image too." class="ez">LINK<span class="ez">This is hidden until mouse over. It can be an image or picture and even include HTML. It will not 'bounce' off the bottom of the screen, so either do not use it on elements at the absolute bottom if the size of the hover is large, or use some javascript.</span></a>
</div>


That should do it.

There are a couple of little quirks for something this simple, that is, the flyovers will not bounce off the bottom of the screen if they are really large. You can put HTML in them and whatever you want.

No image preloaders are necessary. Try it.

[rpgfan3233]

Ah, point taken (and it really does need to work for every user).

If it does need to work for every user, look into CSS and CSS popups. Users may know how to disable JavaScript (or they may be browsing with something like NoScript), but the chances of them adding their own style sheet are slim in comparison. These days JavaScript should be used minimally, using CSS if possible and if the benefit to users outweigh the amount of effort it took to create it. It might appear as if I'm preaching, which I am to a degree, but you will use whatever you choose regardless of what I say anyway. After all, you're the one in charge of your code, so you will do what you feel is right. ^_^

Just remember that not all people have JavaScript enabled. It might be worth the effort to use CSS. :)

[davidhwv]

Thank you both! ... I'll try that CSS (is it that simple?). And yes, I agree with the points on JavaScript being 'disabled' (in some way - either knowingly or otherwise - by users). Me? I'm always for the end-user 'getting' the information (there's nothing worse than having them stopped at some point or missing something). Hmm... sounds like HTML-2 :D

Your help's appreciated.

[Jodarecode]

Here's a link that will get you started:
http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/