Bruzer
Registered User
3,940 posts
fixing it now-good to go sorry
Sarah
Registered User
199 posts
Thank you Kevin for this link. So, for instance, where the code says, <a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a>, I would insert the text I am using "pediatric" where it says "Dynamic Drive" and that would work?? Does this go in the body HTML? And I guess I would have to save a copy of the word as a gif file??
Bruzer, Thanks for the video, but I didn't copy it and now it needs a password. Is there one? Thanks.
Bruzer, Thanks for the video, but I didn't copy it and now it needs a password. Is there one? Thanks.
Bruzer
Registered User
3,940 posts
Sarah I was having a moment lol but it is working now. Sorry for that.
Kevin
Registered User
9 posts
Sarah wrote:
<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a>
<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a>
<a class="thumbnail" href="#">Chair<span><img src="./what/is/your/pic.png" /><br />Picture of wheel chair</span></a>
Change Dynamic drive in both. One can say "chair" the other will display under picture "picture of wheelchair". In <img src= is the picture you want to show when you mouseover word "chair".
Don't forget the CSS things. That hides the span. I forgot it and it will display both <a> and <img> at same time.
Sarah
Registered User
199 posts
Thanks Bruzer, I found it again and I snagited it and printed it. So, I will follow your directions. Thanks.
thank you Kevin. ok, i'm following you, but, what do you mean by CSS things?? Oh, wish I could take some courses to understand all this better. But, I will get it, eventually. Thanks.
This is the page where the word Pediatric sits. Just want to mouse over it and get a picture of the pediatric wheelchair. http://www.yourfirstlook.net/Wheelchairs.html
Think I am getting the understanding of how to do it, I hope.
thank you Kevin. ok, i'm following you, but, what do you mean by CSS things?? Oh, wish I could take some courses to understand all this better. But, I will get it, eventually. Thanks.
This is the page where the word Pediatric sits. Just want to mouse over it and get a picture of the pediatric wheelchair. http://www.yourfirstlook.net/Wheelchairs.html
Think I am getting the understanding of how to do it, I hope.
Bruzer
Registered User
3,940 posts
Well Sarah it will be easy for you i'm sure...
Sarah
Registered User
199 posts
Thanks for your encouragement Bruzer.
Kevin
Registered User
9 posts
Sarah,
This is the CSS stuff. I started up VSD for first time. Added it to Edit -> then Edit Header
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 130px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
Then I used the HTML tool button.
Put this in the html code tab.
<a HREF="#" class="thumbnail">consectetur<span><img src="./images/my_image_use_yours.png" /><br />consectetur</span></a>
Previewed it and I got my the picture show when I hovered over the link
Just for fun I did this.
I made another HTML tool object with the HTML tool button
Put this in the html code tab.
<div class=thumbnail>consectetur<span><img src="./images/my_image_use_yours.png" /><br />consectetur</span></div>
With this Plain text when I hovered over the word the image still displayed.
This is the CSS stuff. I started up VSD for first time. Added it to Edit -> then Edit Header
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 130px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
Then I used the HTML tool button.
Put this in the html code tab.
<a HREF="#" class="thumbnail">consectetur<span><img src="./images/my_image_use_yours.png" /><br />consectetur</span></a>
Previewed it and I got my the picture show when I hovered over the link
Just for fun I did this.
I made another HTML tool object with the HTML tool button
Put this in the html code tab.
<div class=thumbnail>consectetur<span><img src="./images/my_image_use_yours.png" /><br />consectetur</span></div>
With this Plain text when I hovered over the word the image still displayed.
Sarah
Registered User
199 posts
Kevin, You made this so clear. What looked like jibberish before is now clicking. Thank you. I will give it a try. It is so amazing to learn how to accomplish something that seems so foreign. Wish me luck. Here I go. Thanks so very much.
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.
