Hi All, I am trying to add functionality to my website where when the user rolls their mouse over some text, a picture pops up and when the roll off the test the picture goes away.
Thanks for your help...Larry
Larry S
Registered User
7 posts
Levi Abbott
Ambassador
151 posts
Hi Larry,
Because the code is a bit lengthy, and I don't have your specific details. I will point you in the general direction, but I'm not going to write it for you.
First off you need to learn about the Event Objects OnMouseOver & OnMouseOut. These two events allow something to happen when the pointer moves over an HTML object, and when the pointer is moved off the object. This link from W3Schools does a good job of explaining them both: http://www.w3schools.com/jsref/event_onmouseover.asp
The next thing you are going to need is to code a Javascript pop-up module. These guys have posted really clean tight code and instructions on how to implement it: http://javascript.internet.com/navigation/absolute-popup-box.html.
This isn't exactly what you asked for, but tweak the properties a bit and it will be. If you get stuck the w3schools.com's Javascript section has all the information you'll need if you are willing to do the digging. Good Luck!
Because the code is a bit lengthy, and I don't have your specific details. I will point you in the general direction, but I'm not going to write it for you.
First off you need to learn about the Event Objects OnMouseOver & OnMouseOut. These two events allow something to happen when the pointer moves over an HTML object, and when the pointer is moved off the object. This link from W3Schools does a good job of explaining them both: http://www.w3schools.com/jsref/event_onmouseover.asp
The next thing you are going to need is to code a Javascript pop-up module. These guys have posted really clean tight code and instructions on how to implement it: http://javascript.internet.com/navigation/absolute-popup-box.html.
This isn't exactly what you asked for, but tweak the properties a bit and it will be. If you get stuck the w3schools.com's Javascript section has all the information you'll need if you are willing to do the digging. Good Luck!
Visit <a href="http://leviabbott.com" target="_blank">LeviAbbott.com</a>!
Eric Rohloff
Senior Advisor
20,190 posts
Is this what you looking for?
http://progrower.coffeecup.com/pictureonmouseover.html
http://progrower.coffeecup.com/pictureonmouseover.html
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
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
Larry S
Registered User
7 posts
Eric, that is exactly what I am looking for...
Eric Rohloff
Senior Advisor
20,190 posts
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
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.
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>
<!--
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.
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
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
Levi Abbott
Ambassador
151 posts
Nice!
That is really efficient. I've never considered using the visibility attribute that way before.
I think I know what I'm going to do this morning, replace some pop-up modules that don't require that level of complexity.
Did I mention that you're brilliant today Eric?
That is really efficient. I've never considered using the visibility attribute that way before.
I think I know what I'm going to do this morning, replace some pop-up modules that don't require that level of complexity.
Did I mention that you're brilliant today Eric?
Visit <a href="http://leviabbott.com" target="_blank">LeviAbbott.com</a>!
Eric Rohloff
Senior Advisor
20,190 posts
I wish I could take credit. I had that script for a while from helping someone with a similar request but don't know where it came from. I didn't get time to see how it would affect other elements on the page.
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
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
Larry S
Registered User
7 posts
Eric, one last question, how would i modify the code if I want a list of selections in columns such as below?
Cheese Pizza Anchovy Pizza
Pepperoni Pizza Linguica Pizza
Onion Pizza Meatball Pizza
Cheese Pizza Anchovy Pizza
Pepperoni Pizza Linguica Pizza
Onion Pizza Meatball Pizza
Eric Rohloff
Senior Advisor
20,190 posts
Let me take a look later and I'll post back.
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
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
Levi Abbott
Ambassador
151 posts
One way is to simply create multiple ID's in the CSS like so:
<head>
<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;
}
#StyleX {
position:absolute;
visibility:hidden;
border:solid 1px #CCC;
padding:5px;
}
#StyleY {
position:absolute;
visibility:hidden;
border:solid 1px #CCC;
padding:5px;
}
</style>
</head>
<body>
<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a><br />
<a href="#" onMouseOver="ShowPicture('StyleX',1)" onMouseOut="ShowPicture('StyleX',0)">Click Here To Show Image X</a><br />
<a href="#" onMouseOver="ShowPicture('StyleY',1)" onMouseOut="ShowPicture('StyleY',0)">Click Here To Show Image Y</a><br />
<div id="Style"><img src="pictures/mypicture.jpg"></div>
<div id="StyleX"><img src="pictures/mypictureX.jpg"></div>
<div id="StyleY"><img src="pictures/mypictureY.jpg"></div>
</body>
</html>
<head>
<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;
}
#StyleX {
position:absolute;
visibility:hidden;
border:solid 1px #CCC;
padding:5px;
}
#StyleY {
position:absolute;
visibility:hidden;
border:solid 1px #CCC;
padding:5px;
}
</style>
</head>
<body>
<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a><br />
<a href="#" onMouseOver="ShowPicture('StyleX',1)" onMouseOut="ShowPicture('StyleX',0)">Click Here To Show Image X</a><br />
<a href="#" onMouseOver="ShowPicture('StyleY',1)" onMouseOut="ShowPicture('StyleY',0)">Click Here To Show Image Y</a><br />
<div id="Style"><img src="pictures/mypicture.jpg"></div>
<div id="StyleX"><img src="pictures/mypictureX.jpg"></div>
<div id="StyleY"><img src="pictures/mypictureY.jpg"></div>
</body>
</html>
Visit <a href="http://leviabbott.com" target="_blank">LeviAbbott.com</a>!
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.
