HI,
I am trying to get the effect of a text pop up on MouseOver event. I have the code for this from some website, used it in some of my pages and it works.
But now what i am trying to do is incorporate that effect in a page which has another effect--- that of making the background image resize as per the window size. The solution to this later part can be found at -
http://www.experts-exchange.com/Web/Graphics/Web_Images/Q_20526046.htmlI have implemented that at
http://web.njit.edu/~ras5/trial4.htmlNow the problem is when i try to comdine both the effects i do not get the MouseOver text box. When i remove the code of background effect the text box does come. So i guess the text box hides behind the background when both effects are present. I do not know how to solve this problem.
The page containing the code for both the effects i am trying to achieve is at
http://web.njit.edu/~ras5/trial.htmlYou can see the implementation of the code and the manner in which i am trying to achieve it by right clicking and viewing the source. Though the stretching of background is achieved.....the text pop up on mouseover does not appear when the mouse is over the first image.
Below i have given the individual codes for each effect-
--------------------------
----------
----------
----------
----------
-
For stretching background to window size--
<style type="text/css">
#backPic {
z-Index:0;
display:block;
position:absolute;
display:block;
left:0%;
top:0%;
width:100%;
height:100%;
}
/* make it sticky in non MSIE 5/6 */
html>body #backPic {
position:fixed;
}
#tbl {
border:2px solid red;
display:block;
z-index:2;
position:absolute;
left:0%;
top:0%;
width:100%;
/* for CSS2 browsers */
min-height:100%;
}
h1 {color:red;}
</style>
<script language="JScript">
<!-- /* MSIE only JScript !! */
function fixBgImage() {
if (document.all.backPic.styl
e.setExpre
ssion) {
document.all.backPic.style
.setExpres
sion("heig
ht","docum
ent.all.tb
l.offsetHe
ight");
document.recalc();
}
}
ie5 = (document.all && document.getElementById && !document.fireEvent)?true:
false;
ie55= (document.all && document.fireEvent && !document.createComment)?t
rue:false;
ie6 = (document.all && document.fireEvent && document.createComment)?tr
ue:false;
if (!window.opera && (ie5 || ie55 || ie6)) onload=fixBgImage;
// -->
</script>
<body topmargin="0" leftmargin="0">
<img src="images/castlecopy.jpg
" id="backPic" width="640" height="480" >
--------------------------
----------
----------
----------
----------
-
--------------------------
----------
----------
----------
----------
-
For getting pop up text box on MouseOver--
<DIV ID="dek"></DIV>
<SCRIPT TYPE="text/javascript">
<!--
//Pop up information box II (Mike McGrath (mike_mcgrath@lineone.net,
http://website.lineone.net/~mike_mcgrath))
//Permission granted to Dynamicdrive.com to include script in archive
//For this and 100's more DHTML scripts, visit
http://dynamicdrive.comXoffset=-60; // modify these values to ...
Yoffset= 20; // change the popup position.
var old,skn,iex=(document.all)
,yyy=-1000
;
var ns4=document.layers
var ns6=document.getElementByI
d&&!docume
nt.all
var ie4=document.all
if (ns4)
skn=document.dek
else if (ns6)
skn=document.getElementByI
d("dek").s
tyle
else if (ie4)
skn=document.all.dek.style
if(ns4)document.captureEve
nts(Event.
MOUSEMOVE)
;
else{
skn.visibility="visible"
skn.display="none"
}
document.onmousemove=get_m
ouse;
function popup(msg,bak){
var content="<TABLE WIDTH=150 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 "+
"BGCOLOR="+bak+"><TD ALIGN=center><FONT COLOR=black SIZE=2>"+msg+"</FONT></TD>
</TABLE>";
yyy=Yoffset;
if(ns4){skn.document.write
(content);
skn.docume
nt.close()
;skn.visib
ility="vis
ible"}
if(ns6){document.getElemen
tById("dek
").innerHT
ML=content
;skn.displ
ay=''}
if(ie4){document.all("dek"
).innerHTM
L=content;
skn.displa
y=''}
}
function get_mouse(e){
var x=(ns4||ns6)?e.pageX:event
.x+documen
t.body.scr
ollLeft;
skn.left=x+Xoffset;
var y=(ns4||ns6)?e.pageY:event
.y+documen
t.body.scr
ollTop;
skn.top=y+yyy;
}
function kill(){
yyy=-1000;
if(ns4){skn.visibility="hi
dden";}
else if (ns6||ie4)
skn.display="none"
}
//-->
</SCRIPT>
Usage example-
<td width="33%" align="center">
<a href="../../images/pics/mi
sc/assorte
d/frisbeec
hamps.jpg"
ONMOUSEOVER="popup('Playin
g frisbee','lime')"; ONMOUSEOUT="kill()">
<img border="2" src="../../images/pics/mis
c/assorted
/frisbeech
amps_small
.jpg" xthumbnail-orig-image="../
../images/
pics/misc/
assorted/f
risbeecham
ps.jpg" width="100" height="117"></a></td>
--------------------------
----------
----------
----------
----------
-
View the Solution FREE for 7 Days
