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 2 of 2
  1. #1
    abc
    abc is offline
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onclick to change the content & the image correspondingly

    Hello,

    I have 5 images, when I click each image it shows the content corresponds to the image and hides others. It works fine. Now at the same time I want to change the color of the images, highlight the clicked one, the rest is the same. How can I do that?

    function toggleMenu(currMenu) {
    for (i=1; i<6; i++) {
    var theMenu = 'menu'+i
    var thisStyle = (document.getElementById) ? document.getElementById(theMenu).style : eval("document." + theMenu)

    if(theMenu == currMenu) {
    thisStyle.display = "block"
    thisStyle.visibility = "visible"

    } else {
    thisStyle.visibility = "hidden"
    thisStyle.display = "none"

    }
    }
    }

    Thanks!

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Please try the following code, you will need 3 images




    <script language="JavaScript">
    <!--
    var Images = new Array("yourimageover.gif","yourimageout.gif","yourimageon.gif") // list images to preload
    var preloadImages=new Array() // preloads images
    for (i=0;i<=Images.length-1;i++) {
    preloadImages[i]=new Image()
    preloadImages[i].src=Images[i]
    }

    LastID = ""

    function m_over(id){
    (LastID != id?document.getElementById(id).src = "yourimageover.gif":"")
    }

    function m_out(id){
    (LastID != id?document.getElementById(id).src = "yourimageout.gif":"")
    }

    function m_click(id){
    document.getElementById(id).src = "yourimageon.gif"
    if (LastID != ""){
    (LastID != id?document.getElementById(LastID).src = "yourimageout.gif":"")
    }
    LastID = id
    }
    // -->
    </script>

    <a href="yourpage.htm" onMouseOver="m_over('image1');" onMouseOut="m_out('image1')" onClick="m_click('image1')"><img src="yourimageoff.gif" border="0" id="image1">Link One</a>

    <a href="yourpage.htm" onMouseOver="m_over('image2');" onMouseOut="m_out('image2')" onClick="m_click('image2')"><img src="yourimageoff.gif" border="0" id="image2">Link Two</a>

    <a href="yourpage.htm" onMouseOver="m_over('image3');" onMouseOut="m_out('image3')" onClick="m_click('image3')"><img src="yourimageoff.gif" border="0" id="image3">Link Three</a>


    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
    •