Changing Image Border From A Text Link

Play Piano by Ear - Internet Businesses Online Articles - Society 2007 - Debt Consolidation - Debt Consolidation

View Full Version : Changing Image Border From A Text Link

Omission

Apr 26th 2007, 4:36 am

Anyone got any ideas how to achieve this. I want a border of an image to change when i select a certain link, for example

TEXT1 [IMAGE1]

When i highlight Text1 (which is a link) IMAGE1's border will change colour.

I found this

<script type="text/javascript">
window.onload = function() {
var o = document.getElementById('container');
var p = o.getElementsByTagName('img');
for (i = 0; p.length > i; i++) {
p[i].onmouseover = function() {this.style.borderColor = '#f33' };
p[i].onmouseout = function() { this.style.borderColor = '#ccc' };
}
}
</script>

Which I tried to adapt to

<script type="text/javascript">
window.onload = function() {
var o = document.getElementById('container');
var p = o.getElementsByTagName('img');
var l = o.getElementsByTagName('li');
for (i = 0; l.length > i; i++) {
l[i].onmouseover = function() { l[i].style.borderColor = '#f33' };
l[i].onmouseout = function() { l[i].style.borderColor = '#ccc' };
}
}
</script>

where the text links are contained withing <li> tags.... any ideas?

greatpree

Jul 10th 2008, 7:32 am

Try this

<html>
<head>
<title>Javascript</title>
<style>
.red
{
border-color:#FF0000;
}
.blue
{
border-color:#0000FF;
}
</style>
<script language="javascript">
function funOver()
{
document.getElementById("myImg").className = "blue";
}
function funOut()
{
document.getElementById("myImg").className = "red";
}
</script>
</head>

<body>
<img src="image.jpg" id="myImg" border="2" class="red">

<br />
<a href="#" onmouseover="javascript:funOver();" onmouseout="javascript:funOut();">Your Text</a>
</body>
</html>

LogicFlux

Jul 10th 2008, 7:59 pm

I think this gives you access to the elements but accessing the properties of the nodes throw errors for me so you'll have to figure that out yourself.

<script type="text/javascript">
window.onload = function() {

var o = document.getElementById('container');
var l = o.getElementsByTagName('li');

///*
for (i = 0; l.length > i; i++) {

var p = l[i].getElementsByTagName('img');
alert(p.length);

for (j = 0; p.length > j; j++)
{
alert(p[j].id);
}

}
//*/
}
</script>