Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    beginner: getting position of item in array on mouseover

    Hi, I am trying to make it so that when you hover over a specific image, the script grabs the title from that image and places it in a paragraph. At the moment, nothing happens when I hover over any image. I don't fully understand why it's not working but my guess would be it's because I should of specified the img position on mouseover (getImgs[x].onmouseover= imgOnHover. How do I get the position of the item in that array that's being hovered over? is there a better way to write this code without changing the HTML?

    Code:
    <html>
    <head>
    <title>blah</title>
    <script>
    function init() {
    var holder = document.getElementById("holder");
    var getImgs = holder.getElementsByTagName("img");
    var placeHere = document.getElementById("insert_here");
    
    for(x=0; x<getImgs.length; x++){
    getImgs[x].onmouseover= imgOnHover;
    
    function imgOnHover() {
    var getTitle = getImgs[x].title;
    placeHere.innerHTML = getTitle;
    }
    
    }
    
    }
    window.onload = init;
    </script>
    </head>
    <body>
    <div id="holder">
    <img src="image.jpg" title="one">
    <img src="image.jpg" title="two">
    <img src="image.jpg" title="three">
    <img src="image.jpg" title="four">
    <img src="image.jpg" title="five">
    <img src="image.jpg" title="six">
    <img src="image.jpg" title="seven">
    </div>
    <p id="insert_here"></p>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Magic keyword: "this"

    Code:
    function imgOnHover() {
       var getTitle = this.title;
       placeHere.innerHTML = getTitle;
    }

  • Users who have thanked devnull69 for this post:

    unicown (11-21-2012)

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    /facepalm

    thank you lol

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Code:
    <script type = "text/javascript">
    function getTitle(which) {
    var t  = which.title;
    alert (t);
    }
    </script>
    
    <div id="holder">
    <img src="image.jpg" title="one" onmouseover = "getTitle(this)">
    <img src="image.jpg" title="two" onmouseover = "getTitle(this)">
    </div>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •