471,610 Members | 1,336 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,610 software developers and data experts.

How to add hyperlink hover function to image border onMouseover?!!

4
Hi,
I want to know that is there any way that when you move your mouse over an image a border comes around the image and the heyperlink below it becomes underlined or "hovered" too? and vice versa
thanks
Sep 22 '07 #1
7 14537
PaulVS
13
Hi,
I want to know that is there any way that when you move your mouse over an image a border comes around the image and the heyperlink below it becomes underlined or "hovered" too? and vice versa
thanks
you mean this?

Expand|Select|Wrap|Line Numbers
  1. a:hover p { text-decoration: underline; }
  2. a:hover img { border: 1px solid red; }
  3.  
Expand|Select|Wrap|Line Numbers
  1. <a href="#"><img src="/images/test.gif" /><p>Link</p></a>
  2.  
Greetings,

Paul
Sep 22 '07 #2
GSV
4
Thanks for the reply
but i think this is not appropriate for me.
there is a picture and a hyperlink below it. I want that when i move my mouse over the image or the hyperlink, a border emerges around the image, and the hyperlink becomes underlined, and when i move my mouse out the image or the link, everything gets back to normal( no border around the image and the link becomes without underline)
thanks
Sep 22 '07 #3
drhowarddrfine
7,435 Expert 4TB
Hastily thrown together:
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>

<style type="text/css">
.hover-img img:hover{
outline:1px solid red

}
a:link{
text-decoration:none;

}
.hover-img:hover a{
border-bottom:1px solid blue;
}
</style>
</head>

<body>
<div class="hover-img">
<img src="1.png">
<a href="www.google.com">Link</a>
</div>

</body>
</html>[/HTML]
Sep 23 '07 #4
GSV
4
Hastily thrown together:
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>

<style type="text/css">
.hover-img img:hover{
outline:1px solid red

}
a:link{
text-decoration:none;

}
.hover-img:hover a{
border-bottom:1px solid blue;
}
</style>
</head>

<body>
<div class="hover-img">
<img src="1.png">
<a href="www.google.com">Link</a>
</div>

</body>
</html>[/HTML]
Thanks dude but this thing didn't work at all!!
Sep 23 '07 #5
drhowarddrfine
7,435 Expert 4TB
Oh I accidentally didn't copy my whole post. Since it didn't work for you, I assume you viewed it with IE6 or 7. That markup only works in modern browsers. IE doesn't work with modern CSS so we have to adjust for it.

I don't have the markup with the IE hack so I'll redo it in a few.
Sep 23 '07 #6
drhowarddrfine
7,435 Expert 4TB
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>

<style type="text/css">
a:link{
text-decoration:none;
}

img{
border:0;
}

a:hover img{
outline:1px solid red
}

a:hover p{
text-decoration:underline;
}
</style>
</head>

<body>
<a href="www.google.com">
<img src="1.png">
<p>Link</p>
</a>

</body>
</html>[/HTML]
Sep 23 '07 #7
GSV
4
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>

<style type="text/css">
a:link{
text-decoration:none;
}

img{
border:0;
}

a:hover img{
outline:1px solid red
}

a:hover p{
text-decoration:underline;
}
</style>
</head>

<body>
<a href="www.google.com">
<img src="1.png">
<p>Link</p>
</a>

</body>
</html>[/HTML]
Thanks but this didn't work in IE. I changed the code to below for CSS and it works fine in IE and firefox

[HTML]<style type="text/css">
a:Link { text-decoration:none; }
p { text-decoration:none; }
img{ border:0; }
a:hover img{ border: 1px solid red }
a:hover p{ text-decoration:underline; }
</style>[/HTML]
Sep 23 '07 #8

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

13 posts views Thread by windandwaves | last post: by
2 posts views Thread by Robson Carvalho Machado | last post: by
8 posts views Thread by Nathan Sokalski | last post: by
1 post views Thread by Ciuin | last post: by
7 posts views Thread by Cate Archer | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by CCCYYYY | last post: by
1 post views Thread by ZEDKYRIE | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.