FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Look of linked images

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


8166UY
I'm not very familiar with HTML, so I've got two questions.

1. How do you change a linked image into another when someone hovers over it?


2. I get a blue/purple border around the linked images. How do you remove them without removing the link?
mathiaus
Hi Smile


1. Use background images, then apply a different on at :hover e.g. (very rough)
Code:
.link1 {background: url(./images/link1a.gif); }
.link1:hover {background: url(./images/link1h.gif); }



2. In your CSS add this. It's one of the ones every (well nearly), CSS should have
Code:
img { border: 0; }
8166UY
I don't know a lot about HTML, so totally nothings about CSS. Despite that I got the first one going by smashing some buttons and see what happened. The second one appeared to work like following:
Code:
<img src="that image.png" border="0">


Thanks for the help anyways! Wink
DanielXP
Code:
<a href="your link"><img src="that image.png" border="0" style="border:0px;"></a>


That would be the image with the link. (with not purple border)

And for the other one.

Code:
<html>
<head>
<style>
#hoverimage1 {
   background:url("your image source.png");
   width:150px;
   height:100px;
}
#hoverimage1:hover {
   background:url("your NEW image source.png");
}
</style>
</head>
<body>
   <a href="your link" id="hoverimage1"></a>
</body>
</html>


Is a quick demo (should work)
8166UY
Got it already, but also thanks anyways. Very Happy


Can be closed now, I can see no more problems ahead.
mathiaus
-close-
This topic is locked: you cannot edit posts or make replies.    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.