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
    Regular Coder
    Join Date
    Apr 2006
    Posts
    231
    Thanks
    9
    Thanked 1 Time in 1 Post

    OnMouseover Background

    Hey All,

    I'm making my own rating system:

    1 table cell, with 5 links inside. when I hover over the link, I want the cell background to change to the desired image so that it interacts depending on what rating you are about to give. Basically, I suck at javascript. It's supposed to be a simple function like getelementbyid. blablabal idk. and call the function on mouse over? anyone have any idea?

    thanks in advance,
    erind

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's one possiblity

    PHP Code:
    <table border="1">
    <
    td>
    <
    a href="#null" onmouseover="this.parentNode.style.backgroundImage='url(pic1.jpg)'">Link 1</a><BR>
    <
    a href="#null" onmouseover="this.parentNode.style.backgroundImage='url(pic2.jpg)'">Link 2</a><BR>
    <
    a href="#null" onmouseover="this.parentNode.style.backgroundImage='url(pic3.jpg)'">Link 3</a><BR>
    <
    a href="#null" onmouseover="this.parentNode.style.backgroundImage='url(pic4.jpg)'">Link 4</a><BR>
    <
    a href="#null" onmouseover="this.parentNode.style.backgroundImage='url(pic5.jpg)'">Link 5</a><BR>
    </
    td>
    </
    tr>
    </
    table
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    Regular Coder
    Join Date
    Apr 2006
    Posts
    231
    Thanks
    9
    Thanked 1 Time in 1 Post
    That's what I want, but with a function so it looks nicer and I don't have to use those humangous anchor tags. just something like <a href="#vote" onmouseover="rating(image1.gif)" .....

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's 2 to choose from


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

    function 
    rating(pic){

    document.getElementById("mycell").style.backgroundImage="url("+pic+")"

    }


    </script>

    <table border="1" width="100">
    <td id="mycell">

    <a href="#vote" onmouseover="rating('pic01.jpg')">Link 1</a><BR>
    <a href="#vote" onmouseover="rating('pic02.jpg')">Link 2</a><BR>
    <a href="#vote" onmouseover="rating('pic03.jpg')">Link 3</a><BR>
    <a href="#vote" onmouseover="rating('pic04.jpg')">Link 4</a><BR>
    <a href="#vote" onmouseover="rating('pic05.jpg')">Link 5</a><BR>

    </td>
    </tr>
    </table> 
    Or

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

    arr=[
    "pic1.jpg",
    "pic2.jpg",
    "pic3.jpg",
    "pic4.jpg",
    "pic5.jpg"
    ]

    onload=function(){
    myCell=document.getElementById("mycell")
    myLinks=myCell.getElementsByTagName("A")

    for(var 
    i=0;i<myLinks.length;i++){
    myLinks[i].i=i

    myLinks
    [i].onmouseover=function(){
    myCell.style.backgroundImage="url("+arr[this.i]+")"
    }

    }

    }

    </script>

    <table border="1" width="100">
    <td id="mycell">

    <a href="#vote">Link 1</a><BR>
    <a href="#vote">Link 2</a><BR>
    <a href="#vote">Link 3</a><BR>
    <a href="#vote">Link 4</a><BR>
    <a href="#vote">Link 5</a><BR>

    </td>
    </tr>
    </table>

    </BODY>
    </HTML> 
    Last edited by Mr J; 02-15-2007 at 11:40 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

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