Animated Message on Image mouseover with Javascript - HTML / Javascript Tutorials
 
  Buy Ebooks, Video Games, DVDs, Electronics and more !
Home | Help Forums | Web Design Tutorials | Free Swishmax Downloads Make Money Online Blog . Free Image and Photo Sharing and Hosting

 

 

Company

Home

Nework Details

Tutorials

SWiSH 2

SWiSHMax

Flash MX

PHP & MySQL

HTML / JScript

Adobe Photoshop

Corel Draw

Gimp

Miscellaneous

Downloads

Templates

Plugins

Fonts

Wallpapers

Free Images

Scripts and Codes

Products

E-Books

SWiSH BB

SWiSH Templates

SWiSH-DB Newsletter
Subscribe to our newsletter : GO
  Partners / Affiliates

   Free image hosting
   Web Design Pakistan
   Swish Templates
   SWiSH Climax
   Talkfreelance Community
   Template Desire
   Lite boards
   Script Sector
   GimpTalk
   13dots
   Idea Designs
   PHP Cafe
   Sposatoettore
   Free swishmax templates
   Swishzone

Manage your site with Flax Article Content Management System
Animated Message on Image mouseover with Javascript
Category : HTML / Javascript | Level : Beginner | Language : English
Ask Question | Read Comments | Post tutorial | Previous | Next

Web www.swish-db.com

This is a very cool effect. When you mouseover an image, a small marquee pops up with a string of text that you set. Here is how you do it:
Place this code in the HEAD of your code:
QUOTE

<SCRIPT LANGUAGE=\"JavaScript\">
<! Created by Polish-Man>
<! www.htmlhelpline.com/aim>
<! You may remove this code>

<!-- Begin
function showtip2(current,e,text){
 if (document.all&&document.readyState==\"complete\"){
   document.all.tooltip2.innerHTML='<marquee style=\"border:1px solid black\">'+text+'</marquee>'
   document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
   document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
   document.all.tooltip2.style.visibility=\"visible\"
}
 else if (document.layers){
   document.tooltip2.document.nstip.document.write(''+text+'')
   document.tooltip2.document.nstip.document.close()
   document.tooltip2.document.nstip.left=0
   currentscroll=setInterval(\"scrolltip()\",100)
   document.tooltip2.left=e.pageX+10
   document.tooltip2.top=e.pageY+10
   document.tooltip2.visibility=\"show\"
}
}
function hidetip2(){
 if (document.all)
   document.all.tooltip2.style.visibility=\"hidden\"
   else if (document.layers){
   clearInterval(currentscroll)
   document.tooltip2.visibility=\"hidden\"
}
}
//  End -->
</script>


Place this code in the BODY section of your code:
QUOTE

<div id=\"tooltip2\" style=\"position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:gold;z-index:10\"></div>
<div align=\"CENTER\" name=\"divTest\" onMouseover=\"showtip2(this,event,'TEXT STRING HERE');\" onMouseout=\"hidetip2();\" STYLE=\"cursor: hand\">
<TABLE border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><TR><TD COLSPAN=\"7\">
<IMG SRC=\"www.htmlhelpline.com/aim/aimstuff.gif\" WIDTH=\"100\" HEIGHT=\"39\" BORDER=\"0\"><p>
</TABLE>
<p></div>



Just customise the image and texy string to whatever you want...you shouldn't have to edit much in the first code.


>>Kyle<<


© 2002-2005 Flaxweb Network | Article Manager | Gimp Tutorials Library | RAD C++ Library | Free C/C++ Sourcecode |
Sites of interest : Web Design Blog | Swish Templates | Swishmax Ebook | Photoshop Templates | Gimp Tutorials | Text Forum | Make Money Online