Web Analytics Made Easy - StatCounter How to script two arrays for a mouseover event? - CodingForum

Announcement

Collapse
No announcement yet.

How to script two arrays for a mouseover event?

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    How to script two arrays for a mouseover event?

    I know this maybe sounds "newbie", perhaps I am still one.

    I have 3 divs, all of them in a group "name", there are h1 tags inside them with names too. Well actually I have many many divs like this in several pages so I must use a JS sheet (.js).

    Code:
    <div name="area"> <h1 name="stringRed"> Mercury </h1> </div>
<div name="area"> <h1 name="stringRed"> Venus </h1> </div>
<div name="area"> <h1 name="stringRed"> Earth </h1> </div>
    The idea is to create an event for the divs, a mouseover event to a div in order to change the color of the words inside the h1 tags. When the mouse is over one particular div the word inside it must change to red.

    I was trying this Java Script script:

    (a cross-browser event handler present)

    Code:
        function initialize ( ) {
    aArea=document.getElementsByName("area");
    aStringRed=document.getElementsByName("stringRed");

    for (var i=0; i < aArea.length; i++) {
    addEvent (aArea[i], 'mouseover', changeColor);
    addEvent (aArea[i], 'mouseout', changeOutColor);
    }
    }

    function changeColor() {
    ????
    }
    function changeOutColor() {
    ????
    }
    Thank you in advanced for any help.
    Tags: arrays, functions, styles
  • #2
    Is there a reason you have given them names only
    and no ids ? Giving them an id is the "normal" way
    to go, the names are okay for grouping but, each
    one should probably have a unique id also. You can
    do what you describe without the ids but thats
    not the "normal way" .

    Comment

    • #3
      names are deprecated on everything except form elements anyway. using a name on a div is useless, use ID's!
      - Firebug is a web developers best friend! - Learn it, Love it, use it!
      - Validate your code! - JQ/JS troubleshooting
      - Using jQuery with Other Libraries - Jslint for Jquery/other JS library users

      Comment

      • #4
        Code:
        <!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function newb(stf){
	document.getElementById(stf).style.color = 'red';
}
function newc(stf){
	document.getElementById(stf).style.color = 'black';
}
</script>
</head>
<body >
<div id="1"> <h1 onmouseover="newb('1');" onmouseout="newc('1');"> Mercury </h1> </div>
<div id="2"> <h1 onmouseover="newb('2');" onmouseout="newc('2');"> Venus </h1> </div>
<div id="3"> <h1 onmouseover="newb('3');" onmouseout="newc('3');"> Earth </h1> </div>
</body>
</html>
        Evolution - The non-random survival of random variants.
        Physics is actually atoms trying to understand themselves.

        Comment

        • #5
          It ain't purdy but,
          it woeks with ie8 and firefox6.

          Code:
          <script type="text/javascript">

addEvent = function(target, event, method) {
	if (target.addEventListener) {
		target.addEventListener(event, method, false);
	} else if (target.attachEvent) {
		target.attachEvent("on" + event, method);
	}
}

function initialize ( ) {   
    evryThng=document.getElementsByTagName("*");
    for(i=evryThng.length;i--;){
	if(evryThng[i].name == "area1"){
	    addEvent (evryThng[i], 'mouseover', changeColor);
    	    addEvent (evryThng[i], 'mouseout', changeOutColor);
	    }
    }
    aArea=document.getElementsByName("area1");
    aStringRed=document.getElementsByName("stringRed");
    for (var i=0; i < aArea.length; i++) {
    	addEvent (aArea[i], 'mouseover', changeColor);
    	addEvent (aArea[i], 'mouseout', changeOutColor);
    	}
    }

    function changeColor(e) {
    e = e || window.event;
    target = e.target || window.event.srcElement;
    target.style.color = "red";
    }
    function changeOutColor(e) {
    e = e || window.event;
    target = e.target || window.event.srcElement;
    target.style.color = "black";
    }
        </script>

<body onload="initialize ( )">
<div name="area1"> <h1 name="stringRed"> Mercury </h1> </div>
<div name="area1"> <h1 name="stringRed"> Venus </h1> </div>
<div name="area1"> <h1 name="stringRed"> Earth </h1> </div>
</body>

          Comment

          • #6
            Yes, the reason was because there are several divs (no just 3), there are 10 divs repeating in several other pages so the idea was to give them a "name" to later create a simple array in js using the "getElementsByName()". It's best that work width 10 Id's.

            Comment

            • #7
              A friend sent me this solution:

              Code:
              function initialize ( ) {

    var aArea=document.getElementsByName("area");
    for (var i=0; i < aArea.length; i++) {
    aArea[i].addEventListener('mouseover', changeColor);
    aArea[i].addEventListener('mouseout', changeOutColor);
    }
 }

    function changeColor() {
    this.childNodes[1].style.color="red";
    }
    function changeOutColor(divObj) {
    this.childNodes[1].style.color="black";
    }
              What do you think ? simple ?

              Comment

              • #8
                Originally posted by renzocj View Post
                A friend sent me this solution:

                Code:
                function initialize ( ) {

    var aArea=document.getElementsByName("area");
    for (var i=0; i < aArea.length; i++) {
    aArea[i].addEventListener('mouseover', changeColor);
    aArea[i].addEventListener('mouseout', changeOutColor);
    }
 }

    function changeColor() {
    this.childNodes[1].style.color="red";
    }
    function changeOutColor(divObj) {
    this.childNodes[1].style.color="black";
    }
                What do you think ? simple ?
                I think it doen't work in ie8 and below
                but it works in firefox.
                Check out my other post in this thread for one
                that works in mostl browsers.

                Comment

                Previous template Next
                Working...
                X