Changing Image Border From A Text Link

Discussion in 'JavaScript' started by Omission, Apr 26, 2007.

0
  1. #1
    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
    Code (markup):
    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>
    Code (markup):
    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>
    Code (markup):
    where the text links are contained withing <li> tags.... any ideas?
     
    Omission, Apr 26, 2007 IP
  2. greatpree

    greatpree Guest

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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>
     
    greatpree, Jul 10, 2008 IP
  3. LogicFlux

    LogicFlux Peon

    Messages:
    2,925
    Likes Received:
    102
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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>
    Code (markup):
     
    LogicFlux, Jul 10, 2008 IP