Floating Text Link

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Is it possible to have a link on your page with just a picture but when when you float over it, it shows you the name of the website in question?
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes

Posted 8 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Craig

You may be able to use this script from Dynamic Drive: http://www.dynamicdrive.com/dynamicin...

Replace the text part with your photos.

If you need help with this, please let me know.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Sanja,

Its not an image I would like to show or even text with a border round it, its just the text when I float over an image already on my page?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Craig

Possibly you're talking about a tooltip?

If you would like to add a small, brief text message that pops up when a mouse cursor hovers over your picture, you can certainly do this. Adding a tooltip to your image will require a bit of HTML coding, here are the steps:

1. Drag over a HTML widget or text widget (and click on the HTML button on the text toolbar).
2. Add in this code:

<img src="resources/yourimage.jpg"; title="your description">

Replace the following:

yourimage.jpg - replace with the name of your image file name.
your description - replace with a short description of your image.

Hopefully this will do the trick. If not, please let me know.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Sanja,

I would need this to go into this code somewhere, not sure where or how: -

<!--<p style="text-align: center;"><font style="font-weight: bold; color: rgb(0, 102, 0); background-color: rgb(255, 255, 255); font-family: Georgia;" size="5">Links</font></p><p style="text-align: center; color: rgb(204, 0, 0);"><span style="color: rgb(0, 0, 0);">Just hover to see the website address and then press on the pictures to take you to the desired website</span></p><p style="text-align: center; color: rgb(204, 0, 0);"><a href="http://www.americangolf.co.uk">&lt;img style="width: 130px; margin: 4px; padding: 0px; height: 80px;" src="resources/Amer%20G.jpg?;%20" 1265157883835"=""></a><a href="http://www.gigagolf.com">&lt;img style="width: 130px; margin: 4px; padding: 0px; height: 80px;" src="resources/Giga.jpg?timestamp=1265157939064"></a></p><p style="text-align: center; color: rgb(204, 0, 0);"><a href="http://www.onlinegolf.co.uk">&lt;img style="width: 130px; margin: 4px; padding: 0px; height: 80px;" src="resources/Online%20G.jpg?timestamp=1265158119351"></a><a href="http://www.golfonline.co.uk">&lt;img style="width: 130px; margin: 4px; padding: 0px; height: 80px;" src="resources/Golfonline.jpg?timestamp=1265158156740"></a><br></p>
-->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Craig

Whereever you have an img tag, that's where you would insert your title="your text goes here"

e.g. <img style="width: 130px; margin: 4px; padding: 0px; height: 80px;" src="resources/Amer%20G.jpg?;%20" 1265157883835"="" title="your text goes here">
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Cheers Sanja, spot on!!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Great to hear that it worked for you Craig! :)