Hover effect, but with image (read to understand)
That title may be confusing, but I wanted to know how people get the rollover effect where it is just a normal link, no graphics or anything, then your mouse hovers over the link, and it changes color (AH, css, easy to follow) but along with that change in color, an image appears to the left of the link. The whole link isn't an image, meaning you can't right click and choose SAVE IMAGE AS. How do you do something like that. Its a nice effect.
Thanks
bryan
Suzanne posted this at 18:41 — 5th January 2003.
She has: 5,507 posts
Joined: Feb 2000
Which browsers? (it makes a difference).
CSS3 properties are supported in Mozilla (and N7) so you can use some psuedo elements that allow for having images pop up.
Such as -- http://secrets.synapticimpulse.com if you view in N7 or Mozilla (or Chimera? Not sure) you can see images that are not available in IE. I don't think I have any that work with :hover, but there's no reason why not.
Suzanne posted this at 18:45 — 5th January 2003.
She has: 5,507 posts
Joined: Feb 2000
you can also use CSS and list-item declarations for this, using the psuedo-element :hover on the li element, but again, not in IE.
Renegade posted this at 23:09 — 5th January 2003.
He has: 3,022 posts
Joined: Oct 2002
check out http://www.javascriptkit.com and look in the free javascripts section and it's under the link effects section there
that's if you understood that 
if not jsut ask and i'll give you a direct link
Renegade posted this at 23:27 — 5th January 2003.
He has: 3,022 posts
Joined: Oct 2002
I have too much time on my hands so here is a direct link:
http://www.javascriptkit.com/script/script2/arrowimage.shtml
Was that what you wanted? :S
Oh BTW it wasn't under the links section it was the images section
necrotic posted this at 23:15 — 10th January 2003.
He has: 296 posts
Joined: May 2002
You could do an OnMouseOver with the link and use JS to change the visible atribute to 'visible' and onMouseOut to make it 'hidden'. I do something like that on my new design, except you only need to hover over the image which is already shown.
EXAMPLE:
<img src='image.jpg' stlye='visibility: hidden' id='imageid'><a href='link.com' OnMouseOver='document.all.imageid.style.visibility="visible"' OnMouseOut='document.all.imageid.style.visibility="hidden"'>Link</a>
[James Logsdon]
Suzanne posted this at 00:44 — 11th January 2003.
She has: 5,507 posts
Joined: Feb 2000
You can also make it a background in CSS and reserve space for it -- tantek.com/log/ does this for his flags, but for some reason they don't show in N7.
CSS is a superior option because it keeps the scripting out of the content, and allows the content to remain pure.
jag5311 posted this at 03:14 — 11th January 2003.
They have: 202 posts
Joined: Jan 2002
Thanks for the help. Yea, that javascript example was just like what I was talking about.
Thanks
Bryan
SW Reynolds posted this at 00:22 — 15th January 2003.
They have: 24 posts
Joined: Dec 2001
This is a nice script necrotic but unfortunately it does not work in Netscape 4.7 -- the image shows when the page loads, so there is no mouseover effect (it does work fine in NN 7.0 however).
Is there any way to tweak it so it will work in 4.7, or is that impossible due to the nature of 4.7's js support (or lack thereof)?
Suzanne posted this at 02:44 — 15th January 2003.
She has: 5,507 posts
Joined: Feb 2000
fyi, it's DOM support that's lacking -- Netscape invented JavaScript.
dk01 posted this at 07:29 — 15th January 2003.
He has: 516 posts
Joined: Mar 2002
You could tweak it for NS4.7 using 'layers' instead of 'all' and by dropping off the 'style' on the end. Also you would have to use 'show' and 'hide' instead of 'visible' and 'hidden'.
I have written a tutorial on this issue. It is cross-browser also:
http://66.246.52.6/laboratory/javascript/hideshow/
(sorry for the ip but my dns's are completely totalled)
-dk
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.