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.
[img]http://i40.tinypic.com/qqqwm1.png[/img]
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?
<html>
<head>
<title>Image link</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
<p align="left"><b>Demo 1:</b> (individual images):</p>
<p align="left"><a href="flower.jpg" rel="lightbox" title="Optional Caption- Spring is here!">
<img src="images/flower_thumb.jpg" border="0" width="100" height="101"></a>
<a href="horses.jpg" rel="lightbox" title="Optional Caption- Horses on the run" >
<img src="images/horses_thumb.jpg" border="0" width="100" height="70"></a> </p>for more information check this link...
http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm
download Lightbox V2.03a and use sample code
i think this solves your problem...
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.
[img]http://i40.tinypic.com/qqqwm1.png[/img]
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.
<table><tr>
<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>
<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>
<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>
</tr></table>
<span width="200px;" id="answer"> </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
<script>
function change_text(control,display)
{
var ctr=document.getElementById(control);
switch(ctr)
{
case 'one':document.getElementById(display).innerHTML='This text is on ONE'; break;
case 'two':document.getElementById(display).innerHTML='This text is on TWO'; break;
case 'three':document.getElementById(display).innerHTML='This text is on THREE'; break;
default:document.getElementById(display).innerHTML='This text is on default text'; break;
}
}
</script>Hope this will help you.
Thanks & Regards
Dilip Kumar Vishwakarma
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.
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
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.