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

4 New Member

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

Subscribe Reply

14705

PaulVS

New Member

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

 
a:hover p { text-decoration: underline; }

a:hover img { border: 1px solid red; }

Expand|Select|Wrap|Line Numbers

<a href="#"><img src="/images/test.gif" /><p>Link</p></a>

Greetings,

Paul

Sep 22 '07 #2

GSV

New Member

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

Recognized Expert Expert

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

New Member

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

Recognized Expert Expert

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

Recognized Expert Expert

[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

New Member

[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

Similar topics

3053

use javascript onmouseover to trigger hover state of another image

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

Javascript

4782

list item (li) hover effect in IE

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

Javascript

6742

How to set width and height of image using HyperLink Control?

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

ASP.NET

3772

Image Rollovers with the Hyperlink Control

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

ASP.NET

5188

Problem with a:hover + div onmouseover

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

Javascript

17257

Image Links and Hover not working on IE

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

HTML / CSS

2571

CSS hover bug in IE and 2 other cliches.

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

HTML / CSS

2247

1/2 IE6:Hover stops working in Ajax

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

Javascript

1467

javascript function does not function for all fields of repeatedrecordset

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

Javascript

7190

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

7360

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

5451

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

4881

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

4578

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

3076

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1392

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

633

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

280

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

General