Two seperate div elements with connecting links..., Two seperate div elements with links but activating both on mouse over Options

[Graphicsgod]

I'm pulling my hair out trying to figure out how to get this simple thing to work.. I don't want to resort to reworking my div's to make what I want work. I just feel like this should work, but it just doesn't...

So anyway here is what I have:

CODE

<div><a href=""><img src=""></a></div>
<div><a href=""><img src=""></a></div>
<div><a href=""><img src=""></a></div>
<div><a href=""><img src=""></a></div>
<div><a href=""><img src=""></a></div>

<div><a href="">Text Here</a></div>
<div><a href="">Text Here</a></div>
<div><a href="">Text Here</a></div>
<div><a href="">Text Here</a></div>

Now I want that when you mouse over the image it also effects the text link. I know I can easily just combine the image and the text together and it will work, but that's not what I want to do. I tried mixing css and javascript, but it so far only works when the two elements are in the same div. Now technically it should still work even when they are separated because it is just calling for the script. So it shouldn't matter where the two elements are, right?!? But apparently I can only get it to work when they are together also defeating the purpose.

Here is what I tried doing with java script:

WORKS:

CODE

<script language="javascript">
function hightlight()
{
    
    document.getElementById("textspan").style.color = "#a3a2a2";
    document.getElementById("imgsrc").style.border = "0px solid blue";
    //document.getElementById("textspan").setStyle("color","blue");
    //document.getElementById("imgsrc").setStyle("border","0px solid blue");
}
function removehightlight()
{
    document.getElementById("textspan").style.color = "#079ce0";
    document.getElementById("imgsrc").style.border = "0px solid blue";
}
</script>

<div style=onmouseover="hightlight()" onmouseout="removehightlight()"><span id="textspan" >This is a test div to show mouseover</span><img id="imgsrc" src="/images/test.gif" /></div>

So if I add the style command to another div, nothing happens. WTF?!?!?!?!?!?

DOESN'T WORK:

CODE

<script language="javascript">
function hightlight()
{
    
    document.getElementById("textspan").style.color = "#a3a2a2";
    document.getElementById("imgsrc").style.border = "0px solid blue";
    //document.getElementById("textspan").setStyle("color","blue");
    //document.getElementById("imgsrc").setStyle("border","0px solid blue");
}
function removehightlight()
{
    document.getElementById("textspan").style.color = "#079ce0";
    document.getElementById("imgsrc").style.border = "0px solid blue";
}
</script>

<div style=onmouseover="hightlight()" onmouseout="removehightlight()">
<img id="imgsrc" src="/images/test.gif" />
</div>
<div style=onmouseover="hightlight()" onmouseout="removehightlight()">
<a href="#" id="textspan" />Text Here</a>
</div>

Shouldn't this work?!?! I don't know why it shouldn't, I'm going to take a break from it for a min. Anyone who knows xhtml, tell me why I'm an idiot .

[Christian J]

This is incorrect:

CODE

<div style=onmouseover="hightlight()"

(remove the style= part).

Side-notes:

- Note that a DIV by default can be is as wide as the browser window, so the mouseout event can trig even if the cursor is to the right of the image:

CODE

onmouseout="removehightlight()">
<img id="imgsrc" src="/images/test.gif" />
</div>

(you might put the mouse events in the IMG and A elements instead, there's no real need for the DIVs).

- An IMG elements needs an ALT attribute.

- This is a little overkill:

CODE

document.getElementById("imgsrc").style.border = "0px solid blue";

(a zero px wide border doesn't need color or border-style).

[Graphicsgod]

This is incorrect:

CODE

<div style=onmouseover="hightlight()"

(remove the style= part).

Side-notes:

- Note that a DIV by default can be is as wide as the browser window, so the mouseout event can trig even if the cursor is to the right of the image:

CODE

onmouseout="removehightlight()">
<img id="imgsrc" src="/images/test.gif" />
</div>

(you might put the mouse events in the IMG and A elements instead, there's no real need for the DIVs).

- An IMG elements needs an ALT attribute.

- This is a little overkill:

CODE

document.getElementById("imgsrc").style.border = "0px solid blue";

(a zero px wide border doesn't need color or border-style).

Awesome!! Thank you for showing me what I was doing wrong ! Also I am trying to get each links and images to be separate. Right now all the links are acting together. I mouse over one image all the text links get highlighted. I tried adding commands to the javascript to separate them, but they still all highlight together. Do I have to create separate javascript events for each set of links?

Example:

CODE

<script language="javascript">
function hightlight()
{
    
    document.getElementById("textspan1").style.color = "#0091d8";
    document.getElementById("imgsrc1").style.border = "0px solid blue";
    document.getElementById("textspan2").style.color = "#0091d8";
    document.getElementById("imgsrc2").style.border = "0px solid blue";
    document.getElementById("textspan3").style.color = "#0091d8";
    document.getElementById("imgsrc3").style.border = "0px solid blue";
    document.getElementById("textspan4").style.color = "#0091d8";
    document.getElementById("imgsrc4").style.border = "0px solid blue";
    //document.getElementById("textspan").setStyle("color","blue");
    //document.getElementById("imgsrc").setStyle("border","1px solid blue");
}
function removehightlight()
{
    document.getElementById("textspan1").style.color = "#a3a2a2";
    document.getElementById("imgsrc1").style.border = "0px solid blue";
    document.getElementById("textspan2").style.color = "#a3a2a2";
    document.getElementById("imgsrc2").style.border = "0px solid blue";
    document.getElementById("textspan3").style.color = "#a3a2a2";
    document.getElementById("imgsrc3").style.border = "0px solid blue";
    document.getElementById("textspan4").style.color = "#a3a2a2";
    document.getElementById("imgsrc4").style.border = "0px solid blue";
}
</script>

<div><a href=""><img src="" id="imgsrc1"  onmouseover="hightlight()" onmouseout="removehightlight()" /></a></div>
<div><a href=""><img src="" id="imgsrc2"  onmouseover="hightlight()" onmouseout="removehightlight()" /></a></div>
<div><a href=""><img src="" id="imgsrc3"  onmouseover="hightlight()" onmouseout="removehightlight()" /></a></div>
<div><a href=""><img src="" id="imgsrc4"  onmouseover="hightlight()" onmouseout="removehightlight()" /></a></div>

<div><a href="" id="textspan1"  onmouseover="hightlight()" onmouseout="removehightlight()" />Text Here</a></div>
<div><a href="" id="textspan2"  onmouseover="hightlight()" onmouseout="removehightlight()" />Text Here</a></div>
<div><a href="" id="textspan3"  onmouseover="hightlight()" onmouseout="removehightlight()" />Text Here</a></div>
<div><a href="" id="textspan4"  onmouseover="hightlight()" onmouseout="removehightlight()" />Text Here</a></div>

The reason I have the divs setup this way is to create a table look. And sorry for the "opx solid blue", left it blank while I sort out this coding mess.. Then I'll re-enable it.

Thank you for all your help!!

[Graphicsgod]

After playing around I got this quick work around I have this:

CODE

<script language="javascript">
function hightlight1()
{
    
    document.getElementById("textspan1").style.color = "#0091d8";
    document.getElementById("imgsrc1").style.border = "0px solid blue";
    //document.getElementById("textspan").setStyle("color","blue");
    //document.getElementById("imgsrc").setStyle("border","1px solid blue");
}
function removehightlight1()
{
    document.getElementById("textspan1").style.color = "#a3a2a2";
    document.getElementById("imgsrc1").style.border = "0px solid blue";
}
function hightlight2()
{
    
    document.getElementById("textspan2").style.color = "#0091d8";
    document.getElementById("imgsrc2").style.border = "0px solid blue";
    //document.getElementById("textspan").setStyle("color","blue");
    //document.getElementById("imgsrc").setStyle("border","1px solid blue");
}
function removehightlight2()
{
    document.getElementById("textspan2").style.color = "#a3a2a2";
    document.getElementById("imgsrc2").style.border = "0px solid blue";
}
</script>

It's probably not the right way to code this, but so far it's doing what I need..

[Christian J]

The last example should work fine.

To make the code shorter you can instead use a single function with parameters/arguments to separate the different links and images. See e.g. http://www.quirksmode.org/js/function.html