...

View Full Version : css / JS ?



Horvath
01-18-2012, 10:00 PM
Looking for some type of script that when I click on a link.. An image slides into the screen like some type of overlay..

Any thoughts?

xelawho
01-19-2012, 12:40 AM
before someone tells you that this can ONLY be done with jQuery...



<html>
<head>
<style>
#thepic {left:-544px; position: absolute;}
</style>
</head>
<body>
<a href="" onclick="slideIt(); return false">Slide it</a><br>
<img id="thepic" src="http://horsebreedsinfo.com/images/brown_horse.jpg"/>

<script>
var lft=-544;
function slideIt(){
lft++;
document.getElementById('thepic').style.left=lft+'px';
if (lft<=0) setTimeout(slideIt,10);
}
</script>
</p>
</body>
</html>


but you should probably look into jQuery, too - it has some pretty cool effects :D

felgall
01-19-2012, 02:33 AM
Of course all the effects available with jQuery can also be done without jQuery using a lot less JavaScript code.

Horvath
01-21-2012, 02:56 PM
Nice.. that's what I am looking for...

Anyway to make links from the image?

Almost like click-able hotspots.

Like two or three different link areas on the image ?

Thanks

xelawho
01-21-2012, 03:33 PM
yes - you can use an area map (coordinates are left, top, right, bottom):



<html>
<head>
<style>
#thepic {left:-544px; position: absolute;}
</style>
</head>
<body>
<a href="" onclick="slideIt(); return false">Slide it</a><br>
<img id="thepic" src="http://horsebreedsinfo.com/images/brown_horse.jpg" usemap="#horsemap"/>
<map name="horsemap">
<area shape="rect" coords="0,0,544,300" href="http://www.horsebreedsinfo.com/images/Altai.jpg" alt="Altai" />
<area shape="rect" coords="0,301,544,600" href="http://www.horsebreedsinfo.com/images/American_Indian_Horse.jpg" alt="AI" />
</map>
<script>
var lft=-544;
function slideIt(){
lft++;
document.getElementById('thepic').style.left=lft+'px';
if (lft<=0) setTimeout(slideIt,10);
}
</script>
</p>
</body>
</html>

Horvath
01-21-2012, 03:57 PM
Awesome.. You Rock... Can the "Slide It" be an Image too instead of text ?

Thanks

Horvath
01-21-2012, 04:08 PM
Scratch that... I got it....

Thanks Again

Horvath
01-21-2012, 04:14 PM
Think this could be repeated several times on one page?

xelawho
01-21-2012, 04:15 PM
yes, it can - just add the onclick="slideIt()" to the img tag

Horvath
01-21-2012, 08:28 PM
Think this could be repeated several times on one page?

I tried two but the same one comes up regardless what I click

Horvath
01-21-2012, 08:33 PM
<head>
<style>
#service {left:-544px; position: absolute;}
#portfolio {left:-544px; position: absolute;}
</style>
</head>

<img src="images/3d-site-Final_10.png" alt="service" width="166" height="60" vspace="10" border="0" onclick="slideIt()"><br>
<img id="service" src="images/services-sub.png" usemap="#servicemap" width="214" height="367"/>
<map name="servicemap">
<area href="rendering.html" shape="rect" coords="0, 62, 213, 125">
<area href="floorplans.html" shape="rect" coords="0, 129, 213, 193">
<area href="marketing.html" shape="rect" coords="0, 200, 213, 273">
<area href="consulting.html" shape="rect" coords="0, 279, 213, 366">
</map>
<script>
var lft=-200;
function slideIt(){
lft++;
document.getElementById('service').style.left=lft+'px';
if (lft<=0) setTimeout(slideIt,5);
}
</script><br>
<img src="images/3d-site-Final_12.png" alt="portfolio" width="166" height="60" vspace="10" border="0" onclick="slideIt()"><br>
<img id="portfolio" src="images/portfolio-sub.png" usemap="#portmap" width="216" height="366"/>
<map name="portmap">
<area href="exterior.html" shape="rect" coords="15, 84, 210, 120">
<area href="interior.html" shape="rect" coords="19, 137, 212, 179">
<area href="kitchen.html" shape="rect" coords="18, 198, 207, 275">
<area href="design.html" shape="rect" coords="18, 294, 208, 371">
</map>
<script>
var lft=-200;
function slideIt(){
lft++;
document.getElementById('portfolio').style.left=lft+'px';
if (lft<=0) setTimeout(slideIt,5);
}
</script>

xelawho
01-22-2012, 06:08 AM
:eek:



<head>
<style>
#service {left:-544px; position: absolute;}
#portfolio {left:-544px; position: absolute;}
</style>
</head>
<body>
<img src="images/3d-site-Final_10.png" alt="service" width="166" height="60" vspace="10" border="0" onclick="start('service')"><br>
<img id="service" src="images/services-sub.png" usemap="#servicemap" width="214" height="367"/>
<map name="servicemap">
<area href="rendering.html" shape="rect" coords="0, 62, 213, 125">
<area href="floorplans.html" shape="rect" coords="0, 129, 213, 193">
<area href="marketing.html" shape="rect" coords="0, 200, 213, 273">
<area href="consulting.html" shape="rect" coords="0, 279, 213, 366">
</map>
<br>
<img src="images/3d-site-Final_12.png" alt="portfolio" width="166" height="60" vspace="10" border="0" onclick="start('portfolio')"><br>
<img id="portfolio" src="images/portfolio-sub.png" usemap="#portmap" width="216" height="366"/>
<map name="portmap">
<area href="exterior.html" shape="rect" coords="15, 84, 210, 120">
<area href="interior.html" shape="rect" coords="19, 137, 212, 179">
<area href="kitchen.html" shape="rect" coords="18, 198, 207, 275">
<area href="design.html" shape="rect" coords="18, 294, 208, 371">
</map>
<script>

var lft;
var thepic;

function start(pic){
lft=-200;
thepic=pic;
int=setInterval(slideIt,5)
}

function slideIt(){
lft++;
document.getElementById(thepic).style.left=lft+'px';
if (lft==0) clearInterval(int);
}
</script>

</body>
</html>

Horvath
01-22-2012, 02:19 PM
Awesome !!

Anyway to get the slide to end up more in the center of the page? Doesnt have to be perfect, but at least off the left.

Or will this be an issue to due with different screen resolutions?

Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum