PHP RSS PHP RSS

Help Me Find This Script!

Reply

•
•
Join Date: Jun 2005
Posts: 13
Reputation: Stunt is an unknown quantity at this point 
Solved Threads: 0
Stunt's Avatar
Stunt Stunt is offline Offline
Newbie Poster

Help Me Find This Script!

 
0
  #1
Dec 30th, 2008
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?
Stunt
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 293
Reputation: Aamit has a little shameless behaviour in the past 
Solved Threads: 11
Aamit Aamit is offline Offline
Posting Whiz in Training

Re: Help Me Find This Script!

 
0
  #2
Dec 30th, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2008
Posts: 30
Reputation: dilipv is an unknown quantity at this point 
Solved Threads: 4
dilipv dilipv is offline Offline
Light Poster

Re: Help Me Find This Script!

 
0
  #3
Dec 30th, 2008
•
•
•
•
Originally Posted by Stunt View 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?
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
Dilip Kumar Vishwakarma
Programmer
.Net Consulting
If this post is answer for your query then don't forget to mark as an answer.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 293
Reputation: Aamit has a little shameless behaviour in the past 
Solved Threads: 11
Aamit Aamit is offline Offline
Posting Whiz in Training

Re: Help Me Find This Script!

 
0
  #4
Dec 30th, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 276
Reputation: kanaku is on a distinguished road 
Solved Threads: 15
kanaku's Avatar
kanaku kanaku is offline Offline
Posting Whiz in Training

Re: Help Me Find This Script!

 
0
  #5
Dec 30th, 2008
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2005
Posts: 13
Reputation: Stunt is an unknown quantity at this point 
Solved Threads: 0
Stunt's Avatar
Stunt Stunt is offline Offline
Newbie Poster

Re: Help Me Find This Script!

 
0
  #6
Dec 31st, 2008
•
•
•
•
Originally Posted by kanaku View Post
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
Stunt
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the PHP Forum
Thread Tools Search this Thread



apache api array beginner binary body broken buttons cakephp checkbox class cms code cron curl database date date/time display dynamic ebooks echo email error file files folder form forms function functions global google href htaccess html image include insert ip javascript joomla limit link list login mail mediawiki menu mlm msqli_multi_query multiple mycodeisbad mysql navigation number oop parameter paypal pdf php phpincludeissue problem query radio random recourse recursion regex remote script search seo server sessions sms source sp space speed sql static subdomain syntax system table tag tutorial update upload url validator variable vbulletin video web webdesign white xml youtube
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC