I am putting an image on a site, and I was wondering how to get the image to show a description of the link...

  • 1
  • Question
  • Updated 9 years ago
  • Answered
I am putting an image on a site, and I was wondering how to get the image to show a description of the link... Like when you put your mouse over the image it tells you what the image is or what the image link will take you to, any way to do this???...

Simply put, when you put a paypal link or something on your page and you put your mouse over it, it shows a header that says 'Paypal Safest way to Pay online' etc. or something of that nature...

Am I able to implement this kind of thing on my site using some specific code???

Thanks
Photo of Yola_User_A

Yola_User_A

  • 276 Posts
  • 3 Reply Likes
  • hopeful...

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi A

Are you talking about a tooltip? Take a look at my homepage here and put your mouse over my images. Is this what you mean?

http://dejavuapparel.synthasite.com/h...
Photo of Yola_User_A

Yola_User_A

  • 276 Posts
  • 3 Reply Likes
Yup looks to be about what I'm trying to accomplish!... Please share...
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Photo of Yola_User_A

Yola_User_A

  • 276 Posts
  • 3 Reply Likes
Who is Donald?
Oh ok yeah that sounds about right, so how do I get hover text to show on image links???
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Sure.. no problem.

You need to put this into an HTML widget. Then, place high up on your page.

<!--<<div id="dhtmltooltip"></div>

<script type="text/javascript">

/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}

function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip

</script>-->

Then you need to drag another HTML widget over and paste this code in and place under the 1st HTML widget. You can change the width, border, color.

<!--<style type="text/css"> #dhtmltooltip{ position: absolute; width: 170px; border: 1px solid black; padding: 5px; background-color: #F5CCD0; text-align: center; visibility: hidden; z-index: 100; /*Remove below line to remove shadow. Below line should always appear last within this CSS*/ filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); } </style>-->

Then, place this code after your img src code:

onmouseover="ddrivetip('Find out more about me')" ;="" onmouseout="hideddrivetip()"

You can change the text "Find out more about me"

I hope that all makes sense to you. Please try on a test page first to make sure you got it working properly. Lemme know if I can help you further.
Photo of Yola_User_A

Yola_User_A

  • 276 Posts
  • 3 Reply Likes
Ok, going to try it now... Thanks! Will be posting how it turned out in a few minutes...
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
for the onmouseover part.. it should look like this:

<!--<img style="border: 0px" src="YOUR IMAGE PATH" onmouseover="ddrivetip('Find out more about me')" ;="" onmouseout="hideddrivetip()">-->
Photo of Yola_User_A

Yola_User_A

  • 276 Posts
  • 3 Reply Likes
Ok, this is the problem I had last time when I put those <!-- and --> things my images disappear... I am not able to use this kind of code for some reason...
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Sorry... I should have said that you actually need to take out the <!-- and --> They're simply there to prevent the code from being read.
Photo of Yola_User_A

Yola_User_A

  • 276 Posts
  • 3 Reply Likes
Oh ok yeah, because when you told me to use it last time I ended up using a totally different code that didn't have that, I thought that was something new, some new kind of html... IDK lol, but that explains it!

ANYWAY lol

The Tooltip code thing is more than I need I think, here's a simple code that gets it done but just isn't so customizable like your code...

img src="resources/xyz.jpg" title="What You Want the Hover Text to Say..." TARGET="_top"

Thanks!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Oh great! That is miles easier! =) I'm glad that you found something that worked for you!
Photo of Yola_User_A

Yola_User_A

  • 276 Posts
  • 3 Reply Likes
Yeah... Sure it's ugly and yellow, but it works just fine... lol Thanks Again!