Thread: hover on links and pics
Results 1 to 6 of 6
Related
-
pics on comments Forum: HTML Forum
Replies: 0 -
Mouseover pics Forum: Javascript Forum
Replies: 17 -
Pics Forum: HTML Forum
Replies: 1 -
Mouseover pics Forum: HTML Forum
Replies: 0 -
Script to allow users to upload pics Forum: Website Scripts Forum
Replies: 2
-
09-14-2002, 10:51 PM #1
hover on links and pics
So me again...
I can't figure out how to give other effects on my links besides a different background or a color... I was wondering how to make the link fade, how to strike thru, to uppercase and how to move the link when you hover it ...
And I was also wondering how to make a picture change when it's hovered...
Plz help...
-
09-15-2002, 04:52 PM #2
Hello again.
Almost all these effects are do-able thru CSS. Except the fade, thats done with a Java Applet, usually. Or JavaScript can do it to.
To change an image on rollover, check out this tutorial -
http://hotwired.lycos.com/webmonkey/html/96/49/index2a.html?tw=programming
For the other effects, you are basically changing the font when you hover over a link. I have a CSS reference here -
http://css.somepeople.net/cssref
Look up font, font-size, font-style etc. They can all be applied to hover links (a:hover).
Oh, to move a link on hover-
Code:a:hover { position: relative; top: +2px; left: +2px; }
If one of our members helps you, please click theicon to add to their reputation!
No support via email or private message - use the forums!
Before you ask, have you Searched?
-
09-16-2002, 08:31 AM #3
The links worked!!!
But I'm still having trouble with the pics...I can't figure out what to change...
Last edited by DreamingGirl; 09-16-2002 at 12:31 PM.
-
09-16-2002, 01:05 PM #4
If you post some code, we may be able to help.
If one of our members helps you, please click theicon to add to their reputation!
No support via email or private message - use the forums!
Before you ask, have you Searched?
-
09-16-2002, 03:22 PM #5
Hmm here what I'm trying to use...
(edit:sometimes I have to rearrange text because code placed at the beginning of a post messes up the table where posts are placed on the front page of AHFB, in this case there was no text to rearrange so I just babbled)
PHP Code:<script language="Javascript1.1">
function yaImgChange(imgNum,imgSrc) {
document.images[imgNum].src = imgSrc;
}
</script>
PHP Code:<a href="javascript:nothingMuch();" onMouseOver="yaImgChange(11,'img1.gif');" onMouseOut="yaImgChange(11,'img2.gif');">
<img src="img1.gif">
</a>
Last edited by HTML; 09-16-2002 at 03:29 PM.
-
09-16-2002, 03:55 PM #6
Accessing images thru the images array relies on heavily on knowing what the number/name of the image is.
Try this code -
PHP Code:<script language="Javascript1.1">
function yaImgChange(imgName,imgSrc) {
document.images[imgName].src = imgSrc;
}
</script>
<a href="java script:nothingMuch();" onMouseOver="yaImgChange('imageOne','img2.gif');" onMouseOut="yaImgChange('imageOne','img1.gif');">
<img src="img1.gif" id="imageOne">
</a>
PHP Code:
function yaImgChange(imgName,imgSrc) {
PHP Code:
document.images[imgName].src = imgSrc;
}
PHP Code:onMouseOver="yaImgChange('imageOne','img2.gif');"
PHP Code:<img src="img1.gif" id="imageOne">
This should work fine, I tested it, and it worked okay for me. Have fun.If one of our members helps you, please click theicon to add to their reputation!
No support via email or private message - use the forums!
Before you ask, have you Searched?