SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict chartahir's Avatar
    Join Date
    Oct 2006
    Location
    Karachi, Pakistan
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    highlight selected image

    I've a page divided into three frames,

    ----------------------------------------
    |wwwwwwwwwwwwwwwwwwwwwwww|
    |wwwwwwwwHeaderwwwwwwwwwwww|
    ----------------------------------------
    |wwww|wwwwwwwwwwwwwwwwwwww|
    |wwww|wwwwwwwwwwwwwwwwwwww|
    | Leftw|wwwwwwwMain wwwwwwwwww|
    |wwww|wwwwwwwwwwwwwwwwwwww|
    |wwww|wwwwwwwwwwwwwwwwwwww|
    -----------------------------------------

    The menu is in "Header" part, i want to highlight the selected image in "Header" when it is clicked.

    When the image is clicked the related page is displayed in the "Main".
    Onmouse over the highlighted image is displayed and Onmouseout the non-highlighted image is displayed.

    I've tried by removing the Onmouseout event but that keep showing the highlighted image of Onmouseover event.

    Help Plz.
    chartahir

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i want to highlight the selected image
    What is "highlighting an image"?

    Onmouse over the highlighted image is displayed
    Onmouseover what element? The image is displayed where?

  3. #3
    SitePoint Addict chartahir's Avatar
    Join Date
    Oct 2006
    Location
    Karachi, Pakistan
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    another image is displayed on mouseover, that lookslike the image is highlighted..
    chartahir

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Edit:

    'href' should be 'src' in the following code
    Code:
    document.getElementById("imgID").onclick = function()
    	{
    		//code to load the page in the other frame
    
    		this.href="desiredImage.jpg"};
    	}
    }
    But then you have to take care of the case when the user subsequently clicks on another image, which requires that you modify that code.

    Besides setting the clicked image's href property you also need to set all the other image's href properties to the nonhighlighted images. Something like this:
    Code:
    var imgArray = document.getElementById("headerSectionDivID").getElementsByTagName("img");
    for(var i = 0, len = imgArray.length; i < len; ++i)
    {
    	if(imgArray[i] == this)
    	{
    		if (imgArray[i].href.search("Highlight") == -1) //if they click a highlighted image again, do nothing
    		{
    			imgArray[i].href = imgArray[i].href + "Highlight.jpg";
    		}
    	}
    	else
    	{
    		imgArray[i].href = "img" + i + ".jpg"; //name your images appropriately
    	}
    }
    Last edited by 7stud; Jan 15, 2007 at 05:08.

  5. #5
    SitePoint Addict chartahir's Avatar
    Join Date
    Oct 2006
    Location
    Karachi, Pakistan
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <a href="http://localpage1.htm"><img src="path/to/image" id="image1" onclick="display()"></a>


    -------------------------------
    How can i make the function to work correctly.
    I mean that i want to print the image name with source when it is clicked,

    or change the image path to another image when it is clicked.



    function display()
    {
    alert(document.getElementById("image1").src);
    }
    chartahir

  6. #6
    SitePoint Addict chartahir's Avatar
    Join Date
    Oct 2006
    Location
    Karachi, Pakistan
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    var path= "../images/iconTabAdminView_over.jpg";

    document.getElementById("Image1").src = path;


    onclick event if i want to display the image source it works fine,

    but if assigned it a new path it didn't work.

    Know why the new path doesn't work ?
    chartahir

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but if assigned it a new path it didn't work.

    Know why the new path doesn't work ?
    Post a simple example demonstrating the problem.

  8. #8
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't sure, you want something like this:
    Code:
    <script type="text/javascript">
    function display()
    {
    
    var e = document.getElementById('image1');
    alert(e.src) ;
    
    e.setAttribute("src","resim2.bmp") ;
    
    alert(e.src);
    
    }
    </script>
    
    <a href="http://localpage1.htm"><img src="resim1.bmp" id="image1" onclick="display()"></a>
    Code:
      
    <script type="text/javascript">
    function display()
    {
    
    var e = document.getElementById('image1');
    
    e.src="resim2.bmp" ;
    
    }
    </script>
    
    <a href="http://localpage1.htm"><img src="resim1.bmp" id="image1" onclick="display()"></a>
    Last edited by muazzez; Jan 15, 2007 at 07:00.

  9. #9
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't use setAttribute(). Use:

    e.src = ...

  10. #10
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...but the following works fine for me as long as both images are in the same directory as the html page:
    Code:
    <script type="text/javascript" >
    
    function display()
    {
    	var e = document.getElementById('image1');
    	e.setAttribute("src","green_square.jpg") ;
    }
    
    </script>
    </head>
    
    <body>
    
    <a href="http://localpage1.htm"><img src="blue_square.jpg" id="image1" onclick="display(); return false;"></a>
    
    </body>
    </html>

  11. #11
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, if you don't add:

    return false;

    after the onclick() to cancel the click, then the page specified in the href of the link will load. See the html in my previous post.


Bookmarks

Posting Permissions

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