Help

      Forum      Videos      Knowledge Base      Hire Us      Hosting Providers     Sandbox >

 

Forum

 Need a response from us? Become a VIP.
Need help with your site right now? Hire us.

ADD THUMBNAILS TO TEXT (MOUSEOVER TEXT BECOMES THUMBNAIL.)

Posted by DoItRight on January 13, 2012

Hello,



I would like some help adding an element to my client's site. My client requested that when we hover the mouse over certain words on the page that there be thumbnails (or just any kind of image will do.) Pretty straight forward.

Here is a great visual example of what I would like to do at the link below. Small images appear with the option to add text to the thumbnail. These thumbnails and text inserts appear when the link is given a mouse-over. Something like this is perfect.

http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

Your help will be much appreciated.


Back   
 
16 Comments Add Comment
Added by DoItRight
January 23, 2012

Any suggestions y'all?
Added by doitright
January 30, 2012

Any ideas guys ?
Added by doitright
February 24, 2012

still looking for an answer
Added by doitright
April 9, 2012

still waiting on an answer ...................
Added by bgotti VIP
April 10, 2012

Have you tried using the code from the url in your post?
Added by DoItRight
April 14, 2012

Being that said code asks for insertion to <head> tags and external files I decided to come ask here first to ask. Could you help me ?
Added by arkasha
May 9, 2012

Hello there, have you ever found a solution for the text hover an image???
Added by doitright
May 23, 2012

not yet
Added by arkasha
May 23, 2012

I have, so let me know if you need help with it!!!
Added by doitright
August 19, 2012

I do need help
Added by rebecca1
February 22, 2013

Hi arkasha -

Yes, I need help with this. Can you please let me know what to do to get mouseover text to appear? I just can't figure it out.
Added by arkasha
February 22, 2013

When you open the window that has rich-text editor, find the button insert/edit image, its all the way on the right, middle line! When you click on insert/edit image, a small window opens, in the window you have 4 tabs, GENERAL, UPLOAD, APPEARANCE, ADVANCED. In the general tab, you have to pick the main image you want to use, if you dont have it in the files yet, the go to upload and upload it! after you picked the image you want to use, go to advanced tab, under swap image, check the box Alternative Image, then for mouse over use the image you want to show when the mouse is on your main image. then for mouse out, you have to pick the original image, meaning when the mouse moves of the picture you want the original image to show! that is the way to do mouse over! If my explanation is not that good, list your question and ill try to answear!
Added by rebecca1
February 22, 2013

Thank you so much - that was very helpful.

One more question, though. I am also trying to have a definition popup for a word when it is moused over. In Rich-text Editor, if I go to add a link to the word, in the box that pops up, the fourth tab events has a few sections: "onmouseover" "onmouseout", etc. With these sections, I'm assuming what I want is possible, but I don't know what to put in the boxes for it to work properly. Help, please?
Added by arkasha
February 22, 2013

ok to do this with text it a little more complicated, so this takes to account of you having a little knowledge of camelback system!
ok so this is the code that needs to go to <head>. you can do this by going to edit page style that you are using for the page! There you have to click on view source, after there is a big box to put the code in called Additional Head Content! add this code to <head>
<style type="text/css">
.popup {
zoom:1.0;
position:relative;
text-decoration:none;
}
.popup span {
position:fixed;
top:170px;
left:500px;
width:350px;
padding:10px;
border:10px solid #000;
border-radius:10px;
left:-999em;
z-index:990;

}
.popup:hover {visibility:visible}
.popup:hover span {left:350px;}
* html .popup span {position:absolute;}
</style>
then click save!
Then go to the page that you just edited the page style for! open the rich-text editor and put this code into html

<p><a class="popup" href="http://www.here goes adress if clicked on text">this is the text that will show when not hovering<span><img src="http://www.the photo you want to show when hovering on your image" alt="" /></span></a></p>

hope this helps
Added by arkasha
February 22, 2013

by the way the code that goes into the <head> you can play around with the numbers

top:170px; change to your liking
left:500px; same here
width:350px; same here
padding:10px;
border:10px solid #000;
border-radius:10px;
left:-999em;
z-index:990;

you can set the settings that you need
Added by rebecca1
February 22, 2013

Thank you so much! This is really helping - I just have one more things: I want text to appear when hovering on the original text, not an image. I tried replacing the html for the image with text, but I'm obviously not doing it correctly.

<a class="popup">my text that shows when not hovering<span>"the text that shows when hovering" alt=""/></span></a>

How should I adjust this to make it work? Thanks, again. You are a life-saver!
Add Comment:
Please login or register to add a comment or get notified when a comment is added.