Change CSS Text Style on Image Mouseover

JavaScript
1

Hello,

I am trying to set up on a site I am working on so that the text color (preferably the CSS style) changes when I mouseover on an image elsewhere on the page. I know all about changing the current item or placing the image and text in the same div and controlling that, but I cannot place them in the same div.

Ideas?

Thanks!

2

Something like this perhaps … (oops - tried to use a strict DOCTYPE and it wouldn’t allow the URI :p)


<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Mouseover</title>

<script type="text/javascript">
function textColor(which) {
  var st = document.getElementById("spantext").style;
  if (which == 1) {
    st.color = "blue";
    st.backgroundColor = "red";
  }
  else {
    st.color = "red";
    st.backgroundColor = "blue";
  }
}
</script>

<style type="text/css">
#left     { float: left; }
#right    { float: right; }
#spantext { font: 24px Arial; color: red; background-color: blue; }
img       { border: 1px solid black; }
</style>

</head>
<body>
  <div id="left">
    <img src="Image1.jpg" alt="Image 1" onmouseover="textColor(1)" onmouseout="textColor(0)">
  </div>
  <div id="right"><span id="spantext">Hover over that left image</span></div>
</body>
</html>
3

Great, thanks! That mostly works…

Here’s the only caveat with what I’m doing, I’d like to keep the css styling for the text hover that changes the text colors - the text is also a link, as is the photo, so default the text changes color with the a:hover css styling.

So, I’ve got:

<a id="nav1" href="page.html">Text1</a>
<a id="nav2" href="page2.html">Text2</a>
<a id="nav3" href="page3.html">Text3</a>

/*elsewhere on the page*/
<a href="page1.html"><img id="img1" src="img1.jpg"></a>
<a href="page2.html"><img id="img2" src="img2.jpg"></a>
<a href="page3.html"><img id="img3" src="img3.jpg"></a>

(note: I changed the id from spans to "a"s because they were already there)

I would like when you mouseover each image to change the text color to the css a:hover color of the specific correlating text (i.e. image1 changes text1). I’d like to get the mouseover of either the text or the image to change the text color. It doesn’t have to actually call out that css style command for a:hover, just so long as the effect works in both cases. Maybe change classes from like “navon” to “navoff” or something?

Using the code from your reply works to change the text color on the image mouseover, but once it does that the css styling for the a:hover no longer works. I have tried adding the onmouseover script callout in the link for the text, but that just changes it to the hover color and keeps it at that until you scroll over the image and reset it…

Oh, and it’s got to work in IE, unfortunately (who hates IE? This guy! :wink: )

Thanks!

4