Image-pop-up-box - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Image-pop-up-box		[View Sample]

New way to make your visitors wondeer what secrets you are hiding behind your links. This script combines simple rollover effects(onMouseover) with DHTML positioning technique. IMPORTANT: Download the zip-file in order to get the "right" source code.


Insert into <HEAD>
<script language=javaScript> <!-- Beginning of JavaScript - var x,y,a,b,timer,thisbox,isbox,urlimg var posleftvorher var box if (document.layers) { var left_pos=".left="; var top_pos=".top="; var doc="document."; var stl=""; } if (document.all) { var left_pos=".pixelLeft="; var top_pos=".pixelTop="; var doc=""; var stl=".style"; } function openbox(thisbox) { isbox = thisbox if(document.layers) { box = document.popupbox box.visibility="visible" document.popupbox.document.write("<img src='"+thisbox+"'>") document.popupbox.document.close() document.popupbox.left=x+25 document.popupbox.top=y } if(document.all) { box = document.all.popupbox.style box.visibility="visible" popupbox.innerHTML="<img src='"+thisbox+"'>" eval(doc+"popupbox"+stl+left_pos+(x+25)) eval(doc+"popupbox"+stl+top_pos+y) timer=setTimeout("openbox(isbox)",50) } } function closebox(){ clearTimeout(timer) box.visibility="HIDDEN" } function handlerMM(e){ x = (document.layers) ? e.pageX : event.clientX y = (document.layers) ? e.pageY : event.clientY } if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = handlerMM; // - End of JavaScript - --> </script> <STYLE> .mainstyle { position: absolute; font-family:Verdana; color:DDDDDD; font-size:40px; } A { color:DDDDDD; text-decoration:none; } </STYLE>

Insert into <BODY>
<div id="main" class="mainstyle"> <a href="#" onMouseOver="openbox('sandra288.gif')" onMouseOut="closebox()">Hi, my name is Sandra. </a><a href="#" onMouseOver="openbox('catherine288.gif')" onMouseOut="closebox()">And my name is Catherine (call me cat). </a><a href="#" onMouseOver="openbox('garbo288.gif')" onMouseOut="closebox()">And I'm Greta better I was Greta. </a><a href="#" onMouseOver="openbox('sandra288.gif')" onMouseOut="closebox()">Hi, my name is Sandra. </a><a href="#" onMouseOver="openbox('catherine288.gif')" onMouseOut="closebox()">And my name is Catherine (call me cat). </a><a href="#" onMouseOver="openbox('garbo288.gif')" onMouseOut="closebox()">And I'm Greta better I was Greta. </a><a href="#" onMouseOver="openbox('sandra288.gif')" onMouseOut="closebox()">Hi, my name is Sandra. </a><a href="#" onMouseOver="openbox('catherine288.gif')" onMouseOut="closebox()">And my name is Catherine (call me cat). </a><a href="#" onMouseOver="openbox('garbo288.gif')" onMouseOut="closebox()">And I'm Greta better I was Greta. </a><a href="#" onMouseOver="openbox('sandra288.gif')" onMouseOut="closebox()">Hi, my name is Sandra. </a><a href="#" onMouseOver="openbox('catherine288.gif')" onMouseOut="closebox()">And my name is Catherine (call me cat). </a><a href="#" onMouseOver="openbox('garbo288.gif')" onMouseOut="closebox()">And I'm Greta better I was Greta. </a><a href="#" onMouseOver="openbox('sandra288.gif')" onMouseOut="closebox()">Hi, my name is Sandra. </a><a href="#" onMouseOver="openbox('catherine288.gif')" onMouseOut="closebox()">And my name is Catherine (call me cat). </a><a href="#" onMouseOver="openbox('garbo288.gif')" onMouseOut="closebox()">And I'm Greta better I was Greta. </a><a href="#" onMouseOver="openbox('sandra288.gif')" onMouseOut="closebox()">Hi, my name is Sandra. </a><a href="#" onMouseOver="openbox('catherine288.gif')" onMouseOut="closebox()">And my name is Catherine (call me cat). </a><a href="#" onMouseOver="openbox('garbo288.gif')" onMouseOut="closebox()">And I'm Greta better I was Greta. </a> </div> <div id="popupbox" style="position:absolute"></div>

Other Options