text rollover to show picture?? -...

Mar 1st, 2011 at 06:12 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,188 posts

Thanks for posting Levi, The greenhouse is very busy these days.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Mar 1st, 2011 at 07:54 PM
User 131437 Photo

Levi Abbott
Ambassador
151 posts

Glad to help! Besides, I learned something very clever out of this too! :)
I'm always stealing great ideas from everyone on this forum, and learning new things. Nice to be able to give back.
Visit <a href="http://leviabbott.com" target="_blank">LeviAbbott.com</a>!
Mar 2nd, 2011 at 03:58 PM
User 1196102 Photo

Larry S
Registered User
7 posts

Eric you are the best. Thank you.
Aug 4th, 2014 at 12:22 AM
User 2198895 Photo

Mike Holland
Registered User
1 post

Eric Rohloff wrote:
Add a folder to VSD and per my example call it "pictures".
Now add a picture of you choice to that folder.

Paste this code into an HTML Body box in VSD
<script language="Javascript">
<!--
function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>
<style type="text/css">
#Style {
position:absolute;
visibility:hidden;
border:solid 1px #CCC;
padding:5px;

}
</style>

<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a>
<div id="Style"><img src="pictures/mypicture.jpg"></div>


Edit the code at "pictures/mypicture.jpg" to match what you actually call you folder and picture.

Might have to tweak code after it's added as it might not play well with the other page elements. Just give it a try.:)


Eric,

I cam across this post last night and it almost solves a problem I have. I have a paragraph describing components of a product and would like to link about a dozen words to different images. I would like to be able to make the linked words my own color as well as the rest of the text. Also, I will need to define the location of the mouseover image. Here is a link to a non published portion of a site I created with Yahoo's Sitebuilder...it's real clunky. I have VSD and Html editor and am trying to learn how to use them. Don't use the top navigation buttons to navigate around, they will take yo to the current live site. http://www.wheelerack.com/n_prod/walkab … _walk.html

Thanks in advance for any guideance

Mike
Aug 4th, 2014 at 07:10 AM
User 2147626 Photo

SadDuck
Ambassador
2,958 posts

Don't know if you've ever been to Eric's CoffeeCup site ...
http://progrower.coffeecup.com/pictureonmouseover.html

But he has tons of examples including what you are trying to do. Have a look around and you may find your answer. Be sure to check the Home page for more examples. :cool:
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.