PDA

View Full Version : image rollover that changes text?

streetcypher
07-28-2005, 12:25 PM
any help is much appriciated :)

basically i need a script that will change the colour of a link when i mouseover an image. i think it may have to be java script. like on this page: http://www.asterikstudio.com/index.php

i can make the image rollover change another named image (in the example in the link the pink bar below) but i now need a code that will change the color of some text also (like in the link)

any ideas? :D


EDIT:

also the text that needs to be changed and the rollover image are in different tables if that info is needed :p
coothead
07-28-2005, 03:36 PM
Hi there streetcypher,

here is a CSS rollover- no table...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224">
<html>
<head>
<title> anchor rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
<!--
body {
background-color:/*#f0edda*/#eef;
}
div {
width:181px;
text-align:center;
margin:20px auto;
}
a:link {
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
color:#999;
text-decoration:none;
}
a span {
text-decoration:underline;
}
a img {
border:3px double #000;
margin-bottom:10px;
}
a:hover {
color:#f00;
}
//-->
</style>

</head>
<body>

<div>
<a href="#">
<img src="http://www.asterikstudio.com/controlpanel/work/uploads/featured8.jpg" alt="">
<span>Mae</span>
</a>
</div>

</body>
</html>
...and here is a javascript rollover - for a table...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224">
<html>
<head>
<title> table rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
<!--
body {
background-color:#f0edda;
}
#tab,#tab td {
border:1px solid #999;
background-color:#fff;
text-align:center;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
text-align:center;
margin:40px auto;
}
#tab img {
display:block;
}
#link {
color:#999;
}
#td1 {
line-height:30px;
}
//-->
</style>

<script type="text/javascript">
<!--
function swapColor(el,id) {
document.getElementById(id).style.color="#f00";
el.onmouseout=function() {
document.getElementById(id).style.color="";
}
}
//-->
</script>

</head>
<body>

<table id="tab"><tr>
<td onmouseover="swapColor(this,'link')">
<img src="http://www.asterikstudio.com/controlpanel/work/uploads/featured8.jpg" alt="">
</td>
</tr><tr>
<td id="td1"><a id="link" href="#">Mae</a></td>
</tr></table>


</body>
</html>

I hope that they provide you with some ideas. :)
streetcypher
07-28-2005, 03:39 PM
cheers mate, il have a go :)