hover on links and pics

[DreamingGirl]

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...

[QuietDean]

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-

a:hover {
position: relative;
top: +2px;
left: +2px;
}

That will do it

[DreamingGirl]

The links worked!!!

But I'm still having trouble with the pics... I can't figure out what to change...

[QuietDean]

If you post some code, we may be able to help.

[DreamingGirl]

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 )

<script language="Javascript1.1">
function yaImgChange(imgNum,imgSrc) {
document.images[imgNum].src = imgSrc;
}
</script> 

And...

<a href="javascript:nothingMuch();" onMouseOver="yaImgChange(11,'img1.gif');" onMouseOut="yaImgChange(11,'img2.gif');"> 
<img src="img1.gif">
</a> 

There....

[QuietDean]

Accessing images thru the images array relies on heavily on knowing what the number/name of the image is.

Try this 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> 

Lets take it line by line -

function yaImgChange(imgName,imgSrc) { 

This defines a function, and expects two bits of information to it. First is imgName, which is the identifier of the image to change. Second is imgSrc. this is the image file to replace it with.

document.images[imgName].src = imgSrc;

} 

This tells it that we would like the src of the image called imgName to be imgSrc. Therefore 'swapping' one image for another.

onMouseOver="yaImgChange('imageOne','img2.gif');" 

Heres where it all happens, onMouseOver (onMouseOver is an EVENT) then call the function called yaImageChange, but I would like to change the image called 'imageOne' into img2.gif

<img src="img1.gif" id="imageOne"> 

Ah-ha. Here we give the image a name so that the browser knows which image we mean.

This should work fine, I tested it, and it worked okay for me. Have fun.