#1
  1. No Profile Picture
    Contributing User
    ASP Discoverer (100 - 499 posts)

    Join Date
    May 2005
    Posts
    343
    Rep Power
    40

    Smile [CSS] Onmouseover, load a image, onmouseout unload it, without flick


    Hi : )

    I am trying to load a image X when I mouse over Y. Actually the code bellow do this, but this is getting a annoying flick. I tried to work with z-index but without success. Is someone has some light, please let me know.

    Code and test images bellow.

    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Link 1</title>
    <script language="Javascript">
    <!--
    function toggleDiv(id,flagit) {
    if (flagit=="1"){
    if (document.layers) document.layers[''+id+''].visibility = "show"
    else if (document.all) document.all[''+id+''].style.visibility = "visible"
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
    }
    else
    if (flagit=="0"){
    if (document.layers) document.layers[''+id+''].visibility = "hide"
    else if (document.all) document.all[''+id+''].style.visibility = "hidden"
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
    }
    }
    //-->
    </script>
    <style type="text/css">#div1, #div2, #div3 {position:absolute; top: 0; left: 0; z-index: 0; width:200; visibility:hidden}</style>
    </head>
    
    <body>
    <a onMouseOver="toggleDiv('div1',1)" onMouseOut="toggleDiv('div1',0)" target="_blank" href="http://www.google.com"><img border="0" src="page_edit.gif"></a><div id="div1"><img border="0" src="bartest.gif"></div>
    
    </body>
    
    </html>
    And the image link become unuseful.

    If you have some ideias in how to do this in a different way, please let me know ^^

    Thanks for any info. : )
    Attached Images
    Last edited by Khrysller; January 29th, 2008 at 07:08 AM.
  2. #2
  3. Contributing User
    ASP Hero (2000 - 2499 posts)

    Join Date
    Nov 2003
    Location
    UK
    Posts
    2,280
    Rep Power
    311

    [CSS] Onmouseover, load a image, onmouseout unload it, without flick


    Hi Khrysller,
    The image will flicker doing it that way. I would have the div with the link and image in it and when mouse over/out change the class and swap the background using the bartest image as the source.

    But as the bartest image is a true colour u could just change the background color to the grey in the image.

    The only thing you need to do is change the canvas side of the page_edit image to to make it the same height as the bartest image and also increase the width to place the image in the square space in the bartest image. I have attached the image resized and see the code below for both examples.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Link 1</title>
    <script language="Javascript">
    <!--//
    
    var classArray = new Array(3);
    classArray[0] = "div_off";
    classArray[1] = "div_on";
    classArray[2] = "div_on2";
    
    function toggleDiv(d, s) {
    	document.getElementById(d).className = classArray[s];
    }
    
    //-->
    </script>
    <style type="text/css">
    
    body {
    	margin: 0px;
    }
    
    #mainDiv {
    	height: 34px;
    }
    
    .div_off {
    	background: transparent;
    	width: 249px;
    	height: 34px;
    }
    
    .div_on {
    	background: url(bartest.gif) no-repeat;
    	width: 249px;
    	height: 34px;
    }
    
    .div_on2 {
    	background: #D5D5D5;
    	width: 249px;
    	height: 34px;
    }
    
    </style>
    </head>
    <body>
    <div id="mainDiv">
    	<div id="div1" style="float: left;" class="div_off">
    		<a href="http://www.google.com" target="_blank" onMouseOver="toggleDiv('div1','1');" onMouseOut="toggleDiv('div1','0');"><img id="img1" src="page_edit.gif" border="0"></a>
    	</div>
    	<div id="div2" class="div_off">
    		<a href="http://www.google.co.uk" target="_blank" onMouseOver="toggleDiv('div2','2');" onMouseOut="toggleDiv('div2','0');"><img id="img2" src="page_edit.gif" border="0"></a>
    	</div>
    </div>
    </body>
    </html>
    Attached Images
    Hope this advise helps.

    If so please show your appreciation by adding reputation points (click gauge image on top right of this post and score).

Similar Threads

  1. OnMouseOver and onMouseOut doesn't work properly
    By carmen in forum ASP Development
    Replies: 1
    Last Post: June 2nd, 2006, 06:10 AM
  2. random image load time question
    By jaguar in forum ASP Development
    Replies: 8
    Last Post: May 26th, 2005, 10:21 AM
  3. onMouseOver with different size image and overlap
    By sio2i in forum HTML, JavaScript And CSS Help
    Replies: 4
    Last Post: December 2nd, 2004, 11:31 PM
  4. vb: image resizing from stream to SQL Server
    By timandkids in forum .NET Development
    Replies: 0
    Last Post: November 10th, 2004, 12:54 PM
  5. The help is necessary. I can not load the image in a DB
    By Static in forum ASP Development
    Replies: 4
    Last Post: January 6th, 2004, 12:17 PM

IMN logo majestic logo threadwatch logo seochat tools logo