inherit
212852
0
Mar 11, 2022 9:26:22 GMT -8
gmf1369
52
August 2014
gmf1369
|
Post by gmf1369 on Jan 21, 2015 11:57:43 GMT -8
word, name, phrase has a link to image...
when hovering over said word or phrase a thumbnail image of the original pops up...
figure this would be two or three scripts to make this happen if possible...
currently the forums have something similar in place where hovering over a username's tag will show @ username pops up...
shouldn't be too much of a challenge, thanks in advance
***for my use would be simple, have sports forum and instead of creating multiple custom pages for players bios/profiles can create a small template profile image to link to the board which would pop up when hovering player's name...
|
|
inherit
212852
0
Mar 11, 2022 9:26:22 GMT -8
gmf1369
52
August 2014
gmf1369
|
Post by gmf1369 on Jan 22, 2015 12:12:23 GMT -8
okay been working on this from three different angles and think I found a solution, am going to share it here for anyone who cares to use it: <html>
<head>
<style>
span.dropt {border-bottom: thin dotted; background: transparent;}
span.dropt:hover {text-decoration: none; background: transparent; z-index: 6; }
span.dropt span {position: absolute; left: -9999px;
margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
border-style:solid; border-color:black; border-width:1px; z-index: 6;}
span.dropt:hover span {left: 2%; background: transparent;}
span.dropt span {position: absolute; left: -9999px;
margin: 4px 0 0 0px; padding: 3px 3px 3px 3px;
border-style:solid; border-color:black; border-width:1px;}
span.dropt:hover span {margin: 20px 0 0 170px; background: transparent; z-index:6;}
</style>
</head>
<body>
<span class="dropt" title="Pop up Title">Text to hover
<span><img src="link" /><br/>
identifier text
</span>
</span>
<br>
<br>
<span class="dropt" title="Pop up Title">Text to hover
<span><img src="link" /><br/>
identifier text
</span>
</span>
</body>
</html>of course like every code you can change the above <style> to fit your needs - different color, etc. For example I am using this for the New York Jets roster and Work in Progress. just started... But as you can see the first name on that roster Oday Aboushi is finished... For me I placed the body code in between a table code like this: <tr class="loop-first loop-odd">
<td class="col-jersey" rel="75">
75
</td>
<td class="col-name">
<span class="dropt" title="Jets Global">Oday Aboushi
<span><img src="http://i.imgur.com/C7EfnZ7.png?1" /><br/>
#75
</span>
</span>
</td>
<td class="col-position">OL</td>
<td class="col-height">6-5</td>
<td class="col-weight">308</td>
<td class="col-bd">23</td>
<td class="col-exp" rel="02">2</td>
<td class="col-college">Virginia</td>
</tr>
|
|
