Forum

Get help from the community of lovely people.
Need a response from us? Become a VIP. Need help with your site right now? Hire us.

Back to Forum

 

 

ADD THUMBNAILS TO TEXT (MOUSEOVER TEXT BECOMES THUMBNAIL.)

by DoItRight

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
Added by DoItRight

Any suggestions y'all?
Added by doitright

Any ideas guys ?
Added by doitright

still looking for an answer
Added by doitright

still waiting on an answer ...................
Added by bgotti SUBSCRIPTION

Have you tried using the code from the url in your post?
Added by DoItRight

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 SUBSCRIPTION

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

not yet
Added by arkasha SUBSCRIPTION

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

I do need help
Added by rebecca1

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 SUBSCRIPTION

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

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 SUBSCRIPTION

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 SUBSCRIPTION

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

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.