Want to add links, and display an image when the link is hovered?

See example in video below.

There are a lot of scripts out there to help you do this. The problem with using JavaScript on Ning, you have to add scripts to the Custom Code Box. And the code in the Custom Code Box loads last.

Instructions:

The code I am providing simply displays a thumbnail image below your link, when the link is hovered. I wrote the code for a Ning Text Box. There are 2 parts:

• HTML with your links and images
• The CSS

HTML Sample Code:

• Edit HTML code below, and add to a Ning Text Box.
• When you edit the Text Box, be sure to click on the HTML button.
• You may not want your links wrapped with the <h4> tag. If not, for each sample link, remove the start <h4> and the ending of the tag </h4>.
• Change the links to your links - - your_link1, your_link2...
• Change the link text to your text - - Link #1 Text, Link #2 Text...
• Change the image URLs to your image URLs - - your_image1, your_image2...
• Images can be most any size. I suggest making the width similar to the area where the thumbnail will be displayed.
• Please make sure there is a <br> line break after your Link Text.
• To add more links, copy/paste the block of code between <h4> and </h4>.
• Paste your edited code into Text Box.
• Click on Save.

<h4><a target="_blank" href="your_link1">Link #1 Text<br /><span class="hovlinks"><img src="your_image1" /></span></a></h4>
<h4><a target="_blank" href="your_link2">Link #2 Text<br /><span class="hovlinks"><img src="your_image2" /></span></a></h4>

CSS Code:

Add the following CSS to your Advanced CSS via: My Network/Settings/Appearance/Advanced

span.hovlinks {
    position:relative;top:0px;right:0px;z-index:999;
}
a>span.hovlinks img {
    display: none;
}
a:hover>span.hovlinks img {
    display: block;
}

Enjoy!

Jen