PDA

View Full Version : Images Switching

GrimzWizard
12-23-2002, 02:41 PM
You have a pictures in your website.

We have Pic #1
onClick: Pic #2
onClick: Pic #1
etc.

There are like 5 pictures X 2. What's the code for that?
beetle
12-23-2002, 04:32 PM
Use the code posted here (http://www.codingforums.com/showthread.php?s=&threadid=11673) and just apply the dsrc attribute to your images.<img src="pic1.gif" dsrc="pic2.gif">
GrimzWizard
12-23-2002, 05:52 PM
Where's the code on the link you gaved me?
ez4me2c3d
12-23-2002, 06:02 PM
something like this would do it.

<script language="JavaScript">
var x = 0;
function chngImg () {
if (x == 2) {
x = 1;
imgName.src = 'image2.gif';
} else {
x++;
imgName.src = 'image1.gif';
}
}
</script>

and here is your img tag
<img src="image1.gif" name="imgName" id="imgName" />
GrimzWizard
12-23-2002, 06:18 PM
Well, this is a website and there are 20 pictures in total...
And when you click on it it's a link, a href...

INFO FOR YOU
PIC#1
'JP2001#-Small.jpg'
PIC#2
'JP2001#.jpg'


HTML BODY CODE
<script language="javascript">
window.document.images[0].src='JP20011-Small.jpg';
window.document.images[1].src='JP20012-Small.jpg';
window.document.images[2].src='JP20013-Small.jpg';
window.document.images[3].src='JP20014-Small.jpg';
window.document.images[4].src='JP20015-Small.jpg';
window.document.images[5].src='JP20016-Small.jpg';
window.document.images[6].src='JP20017-Small.jpg';
window.document.images[7].src='JP20018-Small.jpg';
window.document.images[8].src='JP20019-Small.jpg';
window.document.images[9].src='JP200110-Small.jpg';
window.document.images[10].src='JP200111-Small.jpg';
window.document.images[11].src='JP200112-Small.jpg';
window.document.images[12].src='JP200113-Small.jpg';
window.document.images[13].src='JP200114-Small.jpg';
window.document.images[14].src='JP200115-Small.jpg';
window.document.images[15].src='JP200116-Small.jpg';
window.document.images[16].src='JP200117-Small.jpg';
window.document.images[17].src='JP200118-Small.jpg';
window.document.images[18].src='JP200119-Small.jpg';
window.document.images[19].src='JP200120-Small.jpg';
</script>

HTML 1ST PICTURE CODE
<a href="javascript:;" onClick="window.document.images[0].src='JP20011.jpg'; return false;"><img SRC=...blablabla></a>


But that code is for one click only...
On a re-click, how to return to the 1st picture as when the html page loaded?
beetle
12-23-2002, 06:47 PM
Originally posted by GrimzWizard
Where's the code on the link you gaved me? The very first post!
ez4me2c3d
12-23-2002, 06:53 PM
you are confusing me so much.. so are you switching one image source through all twenty images? or what?
GrimzWizard
12-23-2002, 06:58 PM
LOL... okay I'll explain you.

There are 20 images, 40 in total. Every images needs a javascript link where it switch to pic #2, and on a re-click it goes back to #1. All of the 20 images has a pic #2...
ez4me2c3d
12-23-2002, 07:19 PM
right ok, but why a link? are you sending the user to another page when they click on the picture?
ez4me2c3d
12-23-2002, 08:33 PM
this is as good as it gets.. from me anyway. this code isn't real efficient but it gets the job done.

see a working example here: http://rap.midco.net/ez4me2c3d/html/img_s.html
GrimzWizard
12-23-2002, 11:16 PM
Cool! What's the code?
ez4me2c3d
12-24-2002, 12:02 AM
you're joking right?

view source
GrimzWizard
12-24-2002, 12:53 AM
How do I add the code to my website?
GrimzWizard
12-24-2002, 12:53 AM
...lol, yes I'm joking!
ez4me2c3d
12-24-2002, 01:26 AM
you right click my page view the source, highlight the text then paste it into your html document.
GrimzWizard
12-24-2002, 01:32 AM
Okay... can you do the code in "a href" for the images?
I just copy parts of the code because my page is already made...
Anyways, I'm asking that to you because it didn't work when I used your code as "a href" and replacing with (A) '.jpg' and (B) '-Small.jpg'
ez4me2c3d
12-24-2002, 01:39 AM
why do you need/want the <a> tag in your page? do you just like the little hand icon or are you linking to another site?

my code would look like this if you incorperate your image names..
<html>
<head>

<script>
x = 1;
function changeIt(obj) {
if (x == 2) {
obj.src = obj.name + 'b-Small.jpg';
x = 1;
} else {
obj.src = obj.name + 'a-Small.jpg';
x = 2;
}
}
</script>

</head>

<body>

<img src="JP20011a-Small.jpg" name="JP20011" id="JP20011" onClick="changeIt(this)" /><br /><br />
<img src="JP20012a-Small.jpg" name="JP20012" id="JP20012" onClick="changeIt(this)" /><br /><br />

</body>

</html>

thats how the first two would look..

JP20011a-Small.jpg --> this would be the first image before you clicked it
JP20011b-Small.jpg --> this would be the first image after you clicked it

then it would go back to 'JP20011a-Small.jpg' once clicked again, then back to 'JP20011b-Small.jpg' once clicked again, then back to.. ok i hope you get the point
beetle
12-24-2002, 01:45 AM
I'm telling you, all you need is the soopaRollovers. They are much easier...<html>
<head>
<title>An image page</title>
<script type="text/javascript">
function soopaSetup() {
var img, sh, sn, sd
for (var i = 0; (img = document.images[i]); i++) {
if (img.getAttribute) {

sn = img.getAttribute("src");
sh = img.getAttribute("hsrc");
sd = img.getAttribute("dsrc");

if (sn != "" && sn != null) {
img.n = new Image();
img.n.src = img.src;

if (sh != "" && sh != null) {
img.h = new Image();
img.h.src = sh;
img.onmouseover = soopaSwapOn
img.onmouseout = soopaSwapOff
}

if (sd != "" && sd != null) {
img.d = new Image();
img.d.src = sd;
img.onmousedown = soopaSwapDown
}
}
}
}
}

function soopaSwapOn() {
this.src = this.h.src;
}

function soopaSwapOff() {
this.src = this.n.src;
}

function soopaSwapDown() {
this.src = this.d.src;
this.temp = typeof(document.onmouseup) != 'undefined' && typeof(document.onmouseup) != 'unknown' ? document.onmouseup : "";
soopaSwapUp.img = this;
document.onmouseup = soopaSwapUp;
}

function soopaSwapUp() {
var ths = soopaSwapUp.img;
ths.src = ths.n.src;
if (ths.temp) document.onmouseup = ths.temp;
}
</script>
</head>
<body onload="soopaSetup();">

<img src="a1.gif" dsrc="a2.gif" />
<img src="b1.gif" dsrc="b2.gif" />
<img src="c1.gif" dsrc="c2.gif" />

</body>
</html>Remember, all the scripting in the head can be placed into an external file for easy reference....
GrimzWizard
12-24-2002, 02:13 AM
...cuz I like the hand! :p
beetle
12-24-2002, 02:35 AM
That's no reason to ditch it! Easily added!function soopaSetup() {
var img, sh, sn, sd
for (var i = 0; (img = document.images[i]); i++) {
if (img.getAttribute) {

sn = img.getAttribute("src");
sh = img.getAttribute("hsrc");
sd = img.getAttribute("dsrc");

if (sn != "" && sn != null) {
img.n = new Image();
img.n.src = img.src;

if (sh != "" && sh != null) {
img.h = new Image();
img.h.src = sh;
img.onmouseover = soopaSwapOn
img.onmouseout = soopaSwapOff
}

if (sd != "" && sd != null) {
img.d = new Image();
img.d.src = sd;
img.onmousedown = soopaSwapDown
img.style.cursor = "pointer";
}
}
}
}
}
Skyzyx
12-24-2002, 02:50 AM
HAHAHAHAHAHAHA!!!!!

BEETLE! I GET IT! PETER BAILEY... BEETLE! HAHAHAHAHAHAHAHAHA!!

Just kidding, I got the joke a long time ago. Anyways, yeah... I'm a huge fan of Soopa-Rollovers. It's the only mouseover script I use, simply because it's brilliant.

You would only have to modify the last paragraph of code as follows to do what it seems like you want to do.


if (sd != "" && sd != null)
{
img.d = new Image();
img.d.src = sd;
img.onclick = soopaSwapDown
img.style.cursor = "pointer";
}


You can visit www.youngpup.net to see a brilliant site, and get the original source code as a zip file.