hey there,
i have a problem with a mouseover script. I have two objects, an image and a text (both in different div's), which i would like to use for the same link. So, when moving over the text the text changes to bold and the image show a mouseover image, and the other way around.
But, here's the problem. The first option is ok, i can solve this with a css a:hover edit, but the second (when moving over the image) doesn't work, and i have no idea how to make it work. Any suggestions??
cheers and thanks,
ronald
for html click here (<!-- m --><a class="postlink" href="http://www.ddvw.nl/test.mouseover.html">http://www.ddvw.nl/test.mouseover.html</a><!-- m -->)
i have stripped the original code to the essence of my problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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 = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"images/01_off.gif";
</script>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"
onMouseOver="document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_on.gif'; return true;"
onMouseOut="document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_off.gif'; return true;">
<img class="thumbnail" name="pic1" SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/01_off.gif"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class=project name="projectnaam"
onMouseOver="document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_on.gif'; return true;"
onMouseOut="document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_off.gif'; return true;">
don bosco plein, eindhoven</a><BR />
</body>
</html><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"
onMouseOver="document.getElementsByName('projectnaam')[0].style.fontWeight='bold';document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_on.gif'; return true;"
onMouseOut="document.getElementsByName('projectnaam')[0].style.fontWeight='normal';document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_off.gif'; return true;">
<img class="thumbnail" name="pic1" SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/01_off.gif"></a>
For Mozilla you could use:
a:hover + a {font-weight: bold;}
unfortunately the other browsers do not understand it yet.
tekst-align: left; double-dutch
AHHH great! this was what i was looking for
thank you very much
only thing is when moving your mouse over the image the script overwrites the css a:hover of the text, so the mouseover text change won't work anymore (it only changes the image). I did some changing in the link itself overwriting the javascript you came up with... is this the correct way to do it??
hehe double dutch... perhaps i did it cos i am dutch
anyways, this really helped me
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"
onMouseOver="document.getElementsByName('projectnaam')[0].style.fontWeight='bold';document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_on.gif'; return true;"
onMouseOut="document.getElementsByName('projectnaam')[0].style.fontWeight='normal';document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_off.gif'; return true;">
<img class="thumbnail" name="pic1" SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/01_off.gif"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="project" name="projectnaam"
onMouseOver="document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_on.gif';this.style.fontWeight='bold'; return true;"
onMouseOut="document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_off.gif';this.style.fontWeight='normal'; return true;">
don bosco plein, eindhoven</a><BR />Yes, that's one way. More often it's done with class:
body {
font-family: Arial, helvetica, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 10pt;
line-height: 13pt;
}
a.project{
color: Black;
text-decoration: none;
}
a:hover.project{
font-weight: bold;
}
.project_on {
font-weight: bold;
color: Black;
text-decoration: none;
}
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"
onMouseOver="document.getElementsByName('projectnaam')[0].className='project_on';document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_on.gif'; return true;"
onMouseOut="document.getElementsByName('projectnaam')[0].className='project';document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_off.gif'; return true;">
<img class="thumbnail" name="pic1" SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/01_off.gif"></a>
btw font units of pt should be used for printed text not screen text. <!-- m --><a class="postlink" href="http://www.w3.org/QA/Tips/font-sizethank">http://www.w3.org/QA/Tips/font-sizethank</a><!-- m --> you very much... one step closer to a good html 4.01 design
cheers,
ronaldSo, where's the java?Originally posted by Triumph
So, where's the javascript?
honey303, Java!=JavaScriptFYI: When you are referring to javascript don't call it Java. Java is a programming language created by Sun Microsystems. Javascript is a scripting language created by Netscape.
i have a problem with a mouseover script. I have two objects, an image and a text (both in different div's), which i would like to use for the same link. So, when moving over the text the text changes to bold and the image show a mouseover image, and the other way around.
But, here's the problem. The first option is ok, i can solve this with a css a:hover edit, but the second (when moving over the image) doesn't work, and i have no idea how to make it work. Any suggestions??
cheers and thanks,
ronald
for html click here (<!-- m --><a class="postlink" href="http://www.ddvw.nl/test.mouseover.html">http://www.ddvw.nl/test.mouseover.html</a><!-- m -->)
i have stripped the original code to the essence of my problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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 = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"images/01_off.gif";
</script>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"
onMouseOver="document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_on.gif'; return true;"
onMouseOut="document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_off.gif'; return true;">
<img class="thumbnail" name="pic1" SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/01_off.gif"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class=project name="projectnaam"
onMouseOver="document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_on.gif'; return true;"
onMouseOut="document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_off.gif'; return true;">
don bosco plein, eindhoven</a><BR />
</body>
</html><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"
onMouseOver="document.getElementsByName('projectnaam')[0].style.fontWeight='bold';document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_on.gif'; return true;"
onMouseOut="document.getElementsByName('projectnaam')[0].style.fontWeight='normal';document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_off.gif'; return true;">
<img class="thumbnail" name="pic1" SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/01_off.gif"></a>
For Mozilla you could use:
a:hover + a {font-weight: bold;}
unfortunately the other browsers do not understand it yet.
tekst-align: left; double-dutch
AHHH great! this was what i was looking for thank you very muchonly thing is when moving your mouse over the image the script overwrites the css a:hover of the text, so the mouseover text change won't work anymore (it only changes the image). I did some changing in the link itself overwriting the javascript you came up with... is this the correct way to do it??
hehe double dutch... perhaps i did it cos i am dutch
anyways, this really helped me
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"
onMouseOver="document.getElementsByName('projectnaam')[0].style.fontWeight='bold';document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_on.gif'; return true;"
onMouseOut="document.getElementsByName('projectnaam')[0].style.fontWeight='normal';document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_off.gif'; return true;">
<img class="thumbnail" name="pic1" SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/01_off.gif"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="project" name="projectnaam"
onMouseOver="document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_on.gif';this.style.fontWeight='bold'; return true;"
onMouseOut="document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_off.gif';this.style.fontWeight='normal'; return true;">
don bosco plein, eindhoven</a><BR />Yes, that's one way. More often it's done with class:
body {
font-family: Arial, helvetica, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 10pt;
line-height: 13pt;
}
a.project{
color: Black;
text-decoration: none;
}
a:hover.project{
font-weight: bold;
}
.project_on {
font-weight: bold;
color: Black;
text-decoration: none;
}
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"
onMouseOver="document.getElementsByName('projectnaam')[0].className='project_on';document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_on.gif'; return true;"
onMouseOut="document.getElementsByName('projectnaam')[0].className='project';document.pic1.src='http://www.webdeveloper.com/forum/archive/index.php/images/01_off.gif'; return true;">
<img class="thumbnail" name="pic1" SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/01_off.gif"></a>
btw font units of pt should be used for printed text not screen text. <!-- m --><a class="postlink" href="http://www.w3.org/QA/Tips/font-sizethank">http://www.w3.org/QA/Tips/font-sizethank</a><!-- m --> you very much... one step closer to a good html 4.01 design
cheers,
ronaldSo, where's the java?Originally posted by Triumph
So, where's the javascript?
honey303, Java!=JavaScriptFYI: When you are referring to javascript don't call it Java. Java is a programming language created by Sun Microsystems. Javascript is a scripting language created by Netscape.