Thread Title Mouse Over Display Images

[tamilbb]

Hi,

I would like someone creat a mod or modification to display images when we mouse over the thread titles.

Example site: http://goo.gl/LNIwdV

(Attention adult website)

As you can see when you mouse over the thread title there are images who popup....

I want to do the same if possible.

Thanks in advance

[kh99]

Yeah, that site is non-nude pictures of girls under 18. Probably not illegal but I wish I hadn't clicked on it.

[tamilbb]

No is not under 18 don't worry...

[HM666]

Didn't you have another thread on this somewhere on here? Anyways having the link does help I can see the code is some JavaScript added to the template. It does not look like they are using any type of external JavaScript file as its not linked in the headerinclude template. The code that is making this happen I believe is this:

<h3 class="threadtitle">
  <a class="title" href="threads/808351-PP-Modeling-Emma-Model-Set-11" id="thread_title_808351" title="" onmouseover="return overlib('<div><nobr><img src=&quot;http://main.imgclick.net/i/00210/jbn2lelzvxei_t.jpg&quot; style=&quot;border: 1px solid #731D1D; max-height: 160px; max-width: 160px; box-shadow: 0px 0px 20px #AAAAAA; &quot;>&nbsp; <img src=&quot;http://main.imgclick.net/i/00210/aihpu8kau0fb_t.jpg&quot; style=&quot;border: 1px solid #731D1D; max-height: 160px; max-width: 160px; box-shadow: 0px 0px 20px #AAAAAA; &quot;>&nbsp; <img src=&quot;http://main.imgclick.net/i/00210/5fjj3xad90h2_t.jpg&quot; style=&quot;border: 1px solid #731D1D; max-height: 160px; max-width: 160px; box-shadow: 0px 0px 20px #AAAAAA; &quot;>&nbsp; <img src=&quot;http://main.imgclick.net/i/00210/tw8wueg8eg7z_t.jpg&quot; style=&quot;border: 1px solid #731D1D; max-height: 160px; max-width: 160px; box-shadow: 0px 0px 20px #AAAAAA; &quot;>&nbsp; </nobr></div>');" onmouseout="return nd();javascript:void(0)">[PP-Modeling] Emma Model - Set 11</a>
				</h3>

It mainly has to do with the onmouseover command in JavaScript, but I don't hand code JavaScript from scratch so I'm not sure what you would put nad how in the template to make it right.

For obvious reasons you cannot use the exact code that I found from the view source page, but perhaps this will help you know what JavaScript to use if you are good with that sort of thing or it may help someone else help you make your site do as you want it to.

[ozzy47]

They are using a modified version of the overlib script. How I don't know.

[HM666]

Ahhhhh ok. I took a look at the overlib script and there is no documentation on doing it for an image that inside the link you are running the mouse over on. So its most likely this was something that a developer coded for this site then. To the OP you may have to pay for this because modifying a JavaScript and making it work in vBulletin may be a stretch for someone just to spend tons of time and then post the code. You can try posting HERE for paid help.

[tamilbb]

Yes they using overlib.js but how they get the image url from the thread? if anyone can help me with this i can handle the rest...

[HM666]

One question. Have you tried to install overlib on your site and make the forum link a roll over? I ask because the roll over might pick up the images if there is not text and most threads that are posted images like that on adult site have very little to no text on them. It, of course, might also just return a blank tool tip.

EDIT: yeah if you have not tried, try to install it and see what happens. I just noticed that on that site they have the tool tip on posts with no images as well, so we all might be over thinking this.

[tamilbb]

Yes i tried to put the overlib on my site but we have to put the image url to otherwise it's not working that's why i'am asking how we can get the url of the images inside thread...

And the full code is:

<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<script type="text/javascript" src="clientscript/overlib/overlib.js"></script>


<a class="title threadtitle_unread" href="threads/Thread title" id="thread_title_808751" title="" onmouseover="return overlib('<div><nobr>
	<img src=&quot;http://imageurl.com/1.jpg&quot; style=&quot;border: 1px solid #731D1D; max-height: 160px; max-width: 160px; box-shadow: 0px 0px 20px #AAAAAA; &quot;>&nbsp;
 	<img src=&quot;http://imageurl.com/2.jpg&quot; style=&quot;border: 1px solid #731D1D; max-height: 160px; max-width: 160px; box-shadow: 0px 0px 20px #AAAAAA; &quot;>&nbsp; 
 	<img src=&quot;http://imageurl.com/3.jpg&quot; style=&quot;border: 1px solid #731D1D; max-height: 160px; max-width: 160px; box-shadow: 0px 0px 20px #AAAAAA; &quot;>&nbsp; </nobr></div>');" onmouseout="return nd();javascript:void(0)">Thread Tille</a>

How they get the image url? All that i want to know...

If anyone can help me?