943,545 Members | Top Members by Rank

Ad:
  • PHP Discussion Thread
  • Unsolved
  • Views: 593
  • PHP RSS
Dec 30th, 2008
0

Help Me Find This Script!

Expand Post »
Hello DaniWeb users, I'm in search of a script that is currently in use by JoyStiq, or something like it if it is unique.

http://i40.tinypic.com/qqqwm1.png

It basically lets you hover the image and a link is displayed under and you can click the image or the link. Visit http://www.joystiq.com/ to see what I mean. Can anybody help me find this script or a script like it?
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Stunt is offline Offline
20 posts
since Jun 2005
Dec 30th, 2008
0

Re: Help Me Find This Script!

PHP Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <title>Image link</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5.  
  6. <script type="text/javascript" src="js/prototype.js"></script>
  7. <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
  8. <script type="text/javascript" src="js/lightbox.js"></script>
  9. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  10. </head>
  11.  
  12. <body>
  13.  
  14. <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
  15. <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
  16. <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
  17. <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
  18.  
  19. <p align="left"><b>Demo 1:</b> (individual images):</p>
  20. <p align="left"><a href="flower.jpg" rel="lightbox" title="Optional Caption- Spring is here!">
  21. <img src="images/flower_thumb.jpg" border="0" width="100" height="101"></a>
  22. <a href="horses.jpg" rel="lightbox" title="Optional Caption- Horses on the run" >
  23. <img src="images/horses_thumb.jpg" border="0" width="100" height="70"></a> </p>

for more information check this link...

http://www.dynamicdrive.com/dynamici...box2/index.htm

download Lightbox V2.03a and use sample code

i think this solves your problem...
Last edited by Aamit; Dec 30th, 2008 at 1:36 am.
Reputation Points: 3
Solved Threads: 15
Posting Whiz
Aamit is offline Offline
341 posts
since Apr 2008
Dec 30th, 2008
0

Re: Help Me Find This Script!

Click to Expand / Collapse  Quote originally posted by Stunt ...
Hello DaniWeb users, I'm in search of a script that is currently in use by JoyStiq, or something like it if it is unique.

http://i40.tinypic.com/qqqwm1.png

It basically lets you hover the image and a link is displayed under and you can click the image or the link. Visit http://www.joystiq.com/ to see what I mean. Can anybody help me find this script or a script like it?
hi there,
this is dilip here,
i have seen that website but not able to figure out what he/she had done, because he/she uses large amount of javascript code in web page itself. Which is not a good idea, it's just my advice.
Now back to the point i think you can do this using javascript easily.
PHP Syntax (Toggle Plain Text)
  1. <table><tr>
  2. <td><a id='one' onmouseover="change_text(this,'answer')">Check Availability<img src='http://www.perrypl.okpls.org/computer.jpg' width=100px height=100px></a></td>
  3. <td><a id='two' onmouseover="change_text(this,'answer')">Check Availability<img src='http://www.perrypl.okpls.org/computer.jpg' width=100px height=100px></a></td>
  4. <td><a id='three' onmouseover="change_text(this,'answer')">Check Availability<img src='http://www.perrypl.okpls.org/computer.jpg' width=100px height=100px></a></td>
  5. </tr></table>
  6. <span width="200px;" id="answer">&nbsp;</span><br/>
in above code there are 3 images, on mouse over event you need to call javascript function and there is span which is used to display information based on selected mouse over event. That javascript function will change text of that span. The javascript function will look like
PHP Syntax (Toggle Plain Text)
  1. <script>
  2. function change_text(control,display)
  3. {
  4. var ctr=document.getElementById(control);
  5. switch(ctr)
  6. {
  7. case 'one':document.getElementById(display).innerHTML='This text is on ONE'; break;
  8. case 'two':document.getElementById(display).innerHTML='This text is on TWO'; break;
  9. case 'three':document.getElementById(display).innerHTML='This text is on THREE'; break;
  10. default:document.getElementById(display).innerHTML='This text is on default text'; break;
  11. }
  12. }
  13. </script>

Hope this will help you.
Thanks & Regards
Dilip Kumar Vishwakarma
Reputation Points: 10
Solved Threads: 4
Light Poster
dilipv is offline Offline
30 posts
since Feb 2008
Dec 30th, 2008
0

Re: Help Me Find This Script!

You can check this thread of daniweb

http://www.daniweb.com/forums/thread80303.html
Last edited by Aamit; Dec 30th, 2008 at 1:49 am.
Reputation Points: 3
Solved Threads: 15
Posting Whiz
Aamit is offline Offline
341 posts
since Apr 2008
Dec 30th, 2008
0

Re: Help Me Find This Script!

Did you mean the images at the top?

Looking at the site, it seems that joystiq didn't do this using javascript.. *snoops at code*


AHA! This was done using CSS *falls off chair in shock*. I didn't know this. Thanks for posting it. =)

Anyway, here is an article on how to do it (although the tutorial uses list item links instead of images)


Other info:
the :hover pseudoclass has a quirky behavior in IE though, so test it in your browser first.
Last edited by kanaku; Dec 30th, 2008 at 2:07 am. Reason: add emphasis to "this was done using CSS" part =p
Reputation Points: 70
Solved Threads: 15
Posting Whiz
kanaku is offline Offline
378 posts
since Jan 2007
Dec 31st, 2008
0

Re: Help Me Find This Script!

Click to Expand / Collapse  Quote originally posted by kanaku ...
Did you mean the images at the top?

Looking at the site, it seems that joystiq didn't do this using javascript.. *snoops at code*


AHA! This was done using CSS *falls off chair in shock*. I didn't know this. Thanks for posting it. =)

Anyway, here is an article on how to do it (although the tutorial uses list item links instead of images)


Other info:
the :hover pseudoclass has a quirky behavior in IE though, so test it in your browser first.
Thank you. This method worked best and I now have it up and running on my site up top. Check it out at scrawlfx.com. =D
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Stunt is offline Offline
20 posts
since Jun 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in PHP Forum Timeline: temp pictures
Next Thread in PHP Forum Timeline: Union Site Search with relevance





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC