Movie Forums (http://www.movieforums.com/community/index.php)
-   Intermission: Miscellaneous Chat (http://www.movieforums.com/community/forumdisplay.php?f=8)
-   -   Help! Anybody fluent in HTML? (http://www.movieforums.com/community/showthread.php?t=26963)

Sleezy 10-07-11 10:37 PM

Help! Anybody fluent in HTML?
 
I'm in the process of building a website and trying to do something pretty specific on my menu links.

Each link in my main horizontal menu will be an image. I want to mimic a hover effect so that when the visitor hovers over each image, the image becomes replaced by another.

So, this is my first menu image that will be linked:

http://i76.photobucket.com/albums/j3...view/about.jpg

When visitors hover over, I want them to see this:

http://i76.photobucket.com/albums/j3...bout_hover.jpg

As an added difficulty, I'm planning for the hover symbols on each image to be different.

I'm trying to make this work using styles, and I know I'll need a separate style for each image so the symbols themselves can be different, but I can't figure out what the code should be. It seems like transposing one image for another on hover should be so easy, but I've scoured the Net trying to find an adopt existing examples of code and nothing is working. Serious +rep is up for grabs here.

Help!

Yoda 10-07-11 10:46 PM

Not a problem. Technically you'll be using JavaScript rather than HTML, and there are lots of cleaner, more efficient ways to do this, but this is probably the simplest and easiest to edit for your purposes:
<img src="hover_off.gif" onmouseover="this.src='hover_on.gif';" onmouseout="this.src='hover_off.gif';" />
There are better ways to go about this if you're going to do more than one, though. PM me if it matters. If you're just trying to throw something together that works, though, this'll do fine.

There's also a pure CSS way to do this, provided you style some other element to use the images as backgrounds, rather than ordinary images.

Sleezy 10-07-11 10:57 PM

THANK. YOU.

Ugh. Why didn't I just ask two hours ago? Thanks so much, really. I'm using separate image files for each item in the menu, so this even keeps me from having to use specific styles.

Whew. If you don't mind, I might hit you up again if I have any more issues. I'm very much a novice at HTML and haven't done it in a while anyway, so I'm kinda learning and re-learning things at the same time right now.

Yoda 10-07-11 11:00 PM

Re: Help! Anybody fluent in HTML?
 
No worries. The amusing thing is, I built a site years ago (I've since sold it to a friend) that spontaneously generates custom code, and one of the tools was as a JavaScript Image Mouseover generator (looks like there's a form post problem with it at the moment, though, so it's not working right now).

Anyway, yeah, feel free to ask away, PM or in this thread. I'm cool with it either way and always enjoy helping out. A whole lot of people took the time to help me out when I was starting, one even specifically telling me, when I asked how I could repay them, that I should just do the same thing for someone else someday. So I'm always glad to get a chance to. :)

7thson 10-07-11 11:20 PM

Re: Help! Anybody fluent in HTML?
 
Great advice Chris - I use flash for most of my hovers - but I understand those that dislike it. Nothing like good ol html though


All times are GMT -3. The time now is 03:07 AM.

Powered by: vBulletin, Copyright, ©2000 - 2024, Jelsoft Enterprises Ltd.
User Alert System provided by Advanced User Tagging v3.3.0 (Lite) - vBulletin Mods & Addons Copyright © 2024 DragonByte Technologies Ltd.
Copyright © Movie Forums