Home ›
ASP.NET Forums » General ASP.NET » Client Side Web Development » CSS

CSS

Last post 05-09-2008 4:56 AM by blodfox777. 3 replies.

Sort Posts:

  • CSS

    05-06-2008, 5:26 AM

    Hi Friends,

     I need to float a div over all other controls in a web page, on the mouse over event of a link button. How can this be achieved?

    Babz
    Filed under:

  • Re: CSS

    05-06-2008, 6:22 AM
    • Loading...
    • elegantkvc
    • Joined on 07-30-2007, 4:20 AM
    • Posts 79

    Set the Zindex of the div  to one or more than one  to make the div come over the other controls in the page

    vijay

  • Re: CSS

    05-06-2008, 10:47 PM
    Answer
    • Loading...
    • blodfox777
    • Joined on 07-12-2007, 12:30 PM
    • Posts 64

    Hi naburajpvdotnet, I think the following demo may give you some help 

     
    <style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}
#enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}
</style>
<div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">
	<img src="http://www.51flash.cn/attachment/1182346916_0.jpg">
</div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
	var ts = gg[i];
	ts.onmousemove = function(event){
		event = event || window.event;
		ei.style.display ="block";
		ei.innerHTML = '<img src="' + this.src + '" />';
      ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";
      ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
     }
     ts.onmouseout = function(){
      ei.innerHTML = "";
      ei.style.display = "none";
     }
     ts.onclick = function(){
      window.open( this.src );
     }
    }
    </script>
     
     

     

    Regards!
    Lance
    -- "Mark As Answer" If my reply helped you --

  • Re: CSS

    05-09-2008, 4:56 AM
    • Loading...
    • blodfox777
    • Joined on 07-12-2007, 12:30 PM
    • Posts 64

    Or that is your want?

     

    <html> 
<head> 
</head> 
<body> 
<a href="1.htm" onmouseover="sAlert('hello');" >Hi move here</a> 
<script type="text/javascript" language="javascript"> 
function sAlert(str){ 
   var msgw,msgh,bordercolor; 
   msgw=400;//Width
   msgh=100;//Height 
   titleheight=25 //title Height
   bordercolor="#336699";//boder color
   titlecolor="#99CCFF";//title color
  
   var sWidth,sHeight; 
   sWidth=document.body.offsetWidth; 
   sHeight=screen.height; 
   var bgObj=document.createElement("div"); 
   bgObj.setAttribute('id','bgDiv'); 
   bgObj.style.position="absolute"; 
   bgObj.style.top="0"; 
   bgObj.style.background="#777"; 
   bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; 
   bgObj.style.opacity="0.6"; 
   bgObj.style.left="0"; 
   bgObj.style.width=sWidth + "px"; 
   bgObj.style.height=sHeight + "px"; 
   bgObj.style.zIndex = "10000"; 
   document.body.appendChild(bgObj); 
    
   var msgObj=document.createElement("div") 
   msgObj.setAttribute("id","msgDiv"); 
   msgObj.setAttribute("align","center"); 
   msgObj.style.background="white"; 
   msgObj.style.border="1px solid " + bordercolor; 
   msgObj.style.position = "absolute"; 
   msgObj.style.left = "50%"; 
   msgObj.style.top = "50%"; 
   msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; 
   msgObj.style.marginLeft = "-225px" ; 
   msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px"; 
   msgObj.style.width = msgw + "px"; 
   msgObj.style.height =msgh + "px"; 
   msgObj.style.textAlign = "center"; 
   msgObj.style.lineHeight ="25px"; 
   msgObj.style.zIndex = "10001"; 
    
   var title=document.createElement("h4"); 
   title.setAttribute("id","msgTitle"); 
   title.setAttribute("align","right"); 
   title.style.margin="0"; 
   title.style.padding="3px"; 
   title.style.background=bordercolor; 
   title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; 
   title.style.opacity="0.75"; 
   title.style.border="1px solid " + bordercolor; 
   title.style.height="18px"; 
   title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; 
   title.style.color="white"; 
   title.style.cursor="pointer"; 
   title.innerHTML="Close"; 
   title.onclick=function(){ 
          document.body.removeChild(bgObj); 
          document.getElementById("msgDiv").removeChild(title); 
          document.body.removeChild(msgObj); 
        } 
   document.body.appendChild(msgObj); 
   document.getElementById("msgDiv").appendChild(title); 
   var txt=document.createElement("p"); 
   txt.style.margin="1em 0" 
   txt.setAttribute("id","msgTxt"); 
   txt.innerHTML=str; 
   document.getElementById("msgDiv").appendChild(txt); 
} 
</script> 
</body> 
</html>
     
    Regards!
    Lance
    -- "Mark As Answer" If my reply helped you --
Page 1 of 1 (4 items)
RSS Available

Advertise on ASP.NET

About this Site