Notices

Great community. Great ideas.

Welcome to ASP/Free, a community dedicated to helping beginners and professionals alike in improving their knowledge of Microsoft's development and administration technologies. Sign up today to gain access to the combined insight of tens of thousands of members.

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

Results 1 to 2 of 2
Share This Thread →
  1. #1
    Khrysller is offline Contributing User
    Join Date
    May 2005
    Posts
    343
    Rep Power
    39

    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 Attached Images
    Last edited by Khrysller; January 29th, 2008 at 06:08 AM.

  2. #2
    markoc's Avatar
    markoc is offline Contributing User
    Join Date
    Nov 2003
    Location
    UK
    Posts
    2,280
    Rep Power
    310

    [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 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).

Share This Thread →

Become Part of This Conversation

Join NowFor Free!

Similar Threads

  1. OnMouseOver and onMouseOut doesn't work properly
    By carmen in forum ASP Development
    Replies: 1
    Last Post: June 2nd, 2006, 05:10 AM
  2. random image load time question
    By jaguar in forum ASP Development
    Replies: 8
    Last Post: May 26th, 2005, 09: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, 10:31 PM
  4. vb: image resizing from stream to SQL Server
    By timandkids in forum .NET Development
    Replies: 0
    Last Post: November 10th, 2004, 11:54 AM
  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, 11:17 AM

ASP Free Advertisers and Affiliates