I need a code for my column.

I need a code for my column. Feb 6, 2014 21:41:03 GMT -8

Quote

Post by Tumbleweed on Feb 6, 2014 21:41:03 GMT -8

Jan 30, 2014 19:09:11 GMT -8 FaithSlaysVamps said:

Hi guys. I don't know why, but I cannot create a thread in the code support board on this forum. Weird, right?

Anyway, I have a plugin for a left side bar. I have staff icon's in the side bar and I'd like for members to be able to hover over the icon and have a list of accounts owned by that particular staff member. So basically hover over a picture and have a list of links to click.

Can someone help me with this? I know it can be done I've seen it before.

Thank you so much,

Bailey.

Not sure if you still need this but here is a really simple one: (You can just stick the whole thing in your side bar content area.)

<style>
#hover-content {width:99px; height:99px; margin:2px;display:none;
}
#parent:hover #hover-content {
background: rgba(255, 255, 255, .7);width:86px;height:86px;margin:2px;
position: relative; margin-top:-100px;padding:8px 2px 0px 8px;
display:block;
}
</style>



<table>
	<tbody>
		<tr>
			<td>


<div id="parent">
<img src="http://i657./uu300/EliteList/Tiles/ZA/4.png">
    <div id="hover-content">
<a href="http://mylink.com">Link one</a><br />
<a href="http://mylink.com">Link one</a><br />
<a href="http://mylink.com">Link one</a>
    </div>
</div>
   

			</td>
			<td>

<div id="parent">
<img src="http://i657./uu300/EliteList/Tiles/ZA/7.png">
    <div id="hover-content">
<a href="http://mylink.com">Link one2</a><br />
<a href="http://mylink.com">Link one2</a><br />
<a href="http://mylink.com">Link one2</a>
    </div>
</div>

			</td>
		</tr>
<!--add the red bit for more rows-->
	</tbody>
 </table>

If you want more rows just add this red bit where I say above to add the red bit. Then in the bit below where I say "another hover here" just copy the div part and paste it there and edit with the image and content.

<tr>
<td>
Another hover here
</td>
<td>
Another hover here
</td>
</tr>

Couple things you should know. My images are 99 by 99 px, which I left in there so you can test it out. I have that width set in the hover content id css however in the content I have that quite a few px's smaller to accommodate for padding. Also notice this part in the css: margin-top:-100px; You need to set that to whatever the height of your images will be and note it is a negative number. That is to move the content (which normally would go below) to be on top of the image. So if your image is 120px in height then it would be: margin-top:-120px;

Any questions, just ask.

Post by FaithSlaysVamps on Jan 30, 2014 19:09:11 GMT -8

Post by Tumbleweed on Feb 6, 2014 21:41:03 GMT -8