473,226 Members | 1,433 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,226 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 14701
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

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

Similar topics

2
by: Elisa | last post by:
I have two images, each with defined CSS hover states. I would like a mouseover on one image to trigger the hover state of the other image. Is this possible using javascript? If so, how? Any...
13
by: windandwaves | last post by:
Hi Folk Just a bit of help here for newbies who want their menus to look nicer. I am sure that many of you make menus like this <ul id="menu"> <li><a href="page1.html">option 1</a></li>...
2
by: Robson Carvalho Machado | last post by:
Dear friends, I'm dynamically creating a Hyperlink with spacer.gif as ImageURL that is an 1px transparent image only to determine link position, but as I create this link dynamically I could not...
8
by: Nathan Sokalski | last post by:
I have several System.Web.UI.WebControls.HyperLink Controls which I want to display as rollover images. I know how to make these manually using the <a> and <img> tags or the <a> tag and a...
1
by: Ciuin | last post by:
Again I need your help. This is the test page I am working on: http://www.manfredkooistra.de/zeugs/test/test.php Description: The page shows a centered image and a navigation menue...
7
by: Cate Archer | last post by:
I want to have a border around an image that changes color when the mouse hovers over it. The following code works perfectly in FireFox but not in Internet Exploiter. The text link changes color...
3
by: noize | last post by:
I have found other bugs related to using hover is CSS with IE, but I cannot find a fix for my issue. I have checked it in both IE 6 & 7 with the same results. I have built a drop-down menu using...
4
by: Sigilaea | last post by:
My previous post got squashed because m post is too long. Sorry for that: I have an AJAX page with a CSS menu at the top. My problem is the hover functionality stops working after someone clicks...
2
by: haft | last post by:
My webpage of discussion contains a javascript powered image gallery of small thumbnail images that when moused-over, display a larger image that corresponds to the current moused-over thumbnail....
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...

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.