www.webdeveloper.com
Results 1 to 2 of 2

Thread: any1 up for help?

  1. #1
    Join Date
    Nov 2002
    Posts
    9

    Smile any1 up for help?

    hey there,
    i have a page divided into 2 frames. I have a linked images on the 1st frame . Those images swap from inactive (img1_inactive.gif) to active when mouse is over (onmouseOver action) and gets back to inactive state (img1_active.gif) when mouse out (onmouseOut action). And there's some xxx.htm file that loads on the 2nd frame - the .htm file loads depending on the image CLICKED in the 1st frame. Everything's pretty easy,

    BUT here's what i would like to do:

    when u click on the image it loads the .htm on the 2nd frame AND remains as ACTIVE (img1_active.gif), plus 'loses' the link (when you go over it with the mouse) - like if there was just <img src="img1_active.gif"> tag with no link or swapping possibility (i.e. no <a> tag and certain functions get inactive). When u go over another image and lick on it - 2nd frame gets reloaded and img1 gets back to 'normal' state again, but the clicked image 'freezes'.... etc - the loop closes

    would be perfect if the script worked on both IE and NN (starting from 4.x)


    i believe you can solve this puzzle

  2. #2
    Join Date
    Nov 2002
    Location
    Dartmoor [Holiday]
    Posts
    2,382
    You need to use the onClick event handler of the images to call a function which performs the following actions:
    1. Reset all images to the original state (setting img.src).
    2. Set the clicked image to active (I would recommend passing the clicked image as a parameter to the onClick function).
    3. Change the location of the document in the other frame.

    It would probably look something like this:
    Code:
    <img name="img1" src="img1_inactive.gif"
    onmouseover="this.src='img1_active.gif'"
    onmouseout="this.src='img1_inactive.gif'"
    onclick="movepage('target.htm',this,'img1_active.gif')">
    
    <script language="javascript">
    function movepage(targetpage, imgtochange, activesrc){
    
    // you could probably do this using a for loop
    img1.src = 'img1_inactive.gif';
    img2.src = 'img2_inactive.gif';
    // etc
    
    imgtochange.src = activesrc;
    
    parent.mainframe.document.location = targetpage;
    }
    </script>
    I haven't tested this, but you get the idea. One problem will be that if you mouse over the active (current page) image than mouse out again it will reset, but you should be able to work around this.

    Good luck

    Adam

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles