When you click the link below, a popup box asks a person for their name. Once they give it, it asks them if they like your site. If they click OK for yes, it thanks them, otherwise it harasses them with 3 popups.
Launch Example
function WhatsYourName(){ var yName = prompt('What is your name?','Your name here'); alert ('Welcome to my site ' + yName); var likesSite = confirm('Do you like my site?\n\n Click OK to say Yes\n Click Cancel for No'); if (likesSite){ alert('Thank you!'); }else { alert('Why NOT!!!!!'); alert('Why NOT!!!!!'); alert('Why NOT!!!!!'); } }
This example presents a map as an image with a link to a JavaScript function that pops a MapQuest window up when the image is clicked.
(Click For Interactive Map and Driving Directions)
<!-- Javascript Function --> function ViewMap(){ var viewMapWindow = window.open ("http://maps.yahoo.com/py/maps.py?BFCat=&Pyt=Tmap&newFL=Use+Address+Below&addr=76+summer+street&csz=02110&country=us&Get%A0Map=Get+Map","MapWin","status=yes,toolbar=yes,scrollbars=yes,location=yes,menu=yes,width=700,height=600,resizable=yes,screenX=25,screenY=25,top=25,left=25"); } <!-- Link Syntax --> <p align="center"><a href="javascript:ViewMap();"><img src="http://www.vardentech.com/images/contact_map.gif" width="300" height="267" ALT="Map of Varden Technologies" border="0"></a><br> <small>(Click For Interactive Map and Driving Directions)</small></p>
Most sites have some sort of navigation setup that features images that change when you mouse over them. An example is on the LoudOffice.com website. The easiest way to do this is via a set of functions that a graphics program such as Fireworks creates for you, however it is possible to do this on your own. Below is a very basic example:
<p><a href="#" onMouseOver="document.image_name.src='http://www.loudoffice.com/class/images/mouseover_two.gif'" onMouseOut="document.image_name.src='http://www.loudoffice.com/class/images/mouseover_one.gif'"> <img src="http://www.loudoffice.com/class/images/mouseover_one.gif" name="image_name" border="0" width="290" height="40"></a></p>