mouseover css problem

rvaggelen · Feb 24, 2005

hey there!

I'm having a problem with my css/mouseover script. Here's the problem. I have two items, a text and a picture, which i would like to both change when moving the mouse over both of them... The text works just fine, both the other way around is a problem. I'm not the biggest coder around, so could you help me out please??

thanks!

here's the code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

a.project	{
	font-family: Arial, helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 10pt;
	line-height: 13pt;
	color: Black;
	text-decoration: none;
}

a:hover.project	{
	font-family: Arial, helvetica, sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 10pt;
	line-height: 13pt;
	color: Black;
	text-decoration: none;
}

img.thumbnail	{
	height: 71px;
	width: 71px;
	border: 0;
	vertical-align: top;
	tekst-align: left;
}

</style>

<script type="text/javascript" language="JavaScript">

    pic = new Image();
    pic1 = new Image();
    pic1.src = "images/01_off.gif";

</script>

</head>

<body>

<a href="#"
	onMouseOver="document.pic1.src='images/01_on.gif'; return true;" 
	onMouseOut="document.pic1.src='images/01_off.gif'; return true;">
	<img class="thumbnail" name="pic1" SRC="images/01_off.gif"></a>

<a href="#" class=project name="projectnaam"
	onMouseOver="document.pic1.src='images/01_on.gif'; return true;" 
	onMouseOut="document.pic1.src='images/01_off.gif'; return true;">
	don bosco plein, eindhoven</a><BR />

</body>

</html>

Vragabond · Feb 24, 2005

How about:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

a.project    {
    display: block;
    height: 71px;
    font-family: Arial, helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 10pt;
    line-height: 13pt;
    color: black;
    text-decoration: none;
    background: url(images/01_off.gif) top left no-repeat;
    padding-left: 73px;
}

a.project:hover    {
    font-weight: bold;
    background: url(images/01_on.gif) top left no-repeat;
}

</style>
</head>

<body>

<a href="#" class="project">don bosco plein, eindhoven</a>

</body>

</html>

Code is untested but should work. Let's take a look at it:

1. Syntax a:hover.project is wrong, correct is displayed above. It is a with a class project when hovered not a when hovered with a class project. Comes with practice.

2. Javascript is not neccessary as aren't two links. My version has only one link which has image as a background and uses padding to prevent text being written all over the image. You might need to do some extra styling to make it look like you want it to but without the visual aide, this is all I can do.

3. When using pseudo classes

link, :visited, :focus, :hover, :active) you need not repeat the original values. You only specify the values that are change from the original class others will be inherited.

Hope it helps.

rvaggelen · Feb 24, 2005

thx for the quick reply...

the problem is that text and image are in two seperate div's, so i can't put it in one physical link.
I have no problem when i moveover the text, cos than it just uses the image mouseover code to change the image and the a:hover css to change the text to bold. The thing is, when moving over the picture i need the font style to change.

tnx and cheers,
ronald

this is the full context:

http://www.diederendirrix.nl/projecten_woningbouw.html

rvaggelen · Feb 25, 2005

ey ppl,

on another forum somebody found the anwser to my problem... if anybody has the same problem, this might work:

Code:

<a href="#"
    onMouseOver="document.getElementsByName('projectnaam')[0].style.fontWeight='bold';document.pic1.src='images/01_on.gif'; return true;"
    onMouseOut="document.getElementsByName('projectnaam')[0].style.fontWeight='normal';document.pic1.src='images/01_off.gif'; return true;">
    <img class="thumbnail" name="pic1" SRC="images/01_off.gif"></a>

<a href="#" class="project" name="projectnaam"
	onMouseOver="document.pic1.src='images/01_on.gif';this.style.fontWeight='bold'; return true;" 
	onMouseOut="document.pic1.src='images/01_off.gif';this.style.fontWeight='normal';  return true;">
	don bosco plein, eindhoven</a>

anyways thanks for your time and cheers,
ronald

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

mouseover css problem

rvaggelen

Technical User

Vragabond

Programmer

rvaggelen

Technical User

rvaggelen

Technical User

Similar threads

Part and Inventory Search

Sponsor