Hello Guest, please login or register.
Did you miss your activation email?
Login with username, password and session length.

Pages: [1]   Go Down

Author Topic: Javascripting hree  (Read 2145 times)

0 Members and 1 Guest are viewing this topic.
Javascripting hree
« on: August 21, 2008, 09:00:34 pm »
  • *
  • Reputation: +0/-0
  • Offline Offline
  • Gender: Male
  • Posts: 29
I have this website thingy.  Yeah.  :D!  I wanna make it so that if you click on an image it changes to another image and if you click it again it either reverts to the old image or it changes to yet another image and so on.  D:!?
Logged
  • _D_W_ RP Archives
Re: Javascripting hree
« Reply #1 on: August 21, 2008, 09:12:19 pm »
  • *
  • Reputation: +3/-0
  • Offline Offline
  • Gender: Male
  • Posts: 6629
Code: [Select]
var toggled = false;

function ChangeImage(imgTag)
{
if (toggled == true)
{
             imgTag.src = "images/my/awesome/image.gif";
}
else
{
             imgTag.src = "images/my/awesome/image/alternative.gif";
}
toggled = !toggled;
}

<img src="images/my/awesome/image.gif" onclick="ChangeImage(this);"/>

Something like that should work.
Logged
Re: Javascripting hree
« Reply #2 on: August 21, 2008, 09:34:05 pm »
  • *
  • Reputation: +0/-0
  • Offline Offline
  • Gender: Male
  • Posts: 29
Yay :D!  Thank you!

Also, with this, would it just affect one image or every image defined, like, multiple pictures?  o_O
Logged
  • _D_W_ RP Archives
Re: Javascripting hree
« Reply #3 on: August 21, 2008, 09:36:00 pm »
  • *
  • Reputation: +3/-0
  • Offline Offline
  • Gender: Male
  • Posts: 6629
Only the images you place the onclick="ChangeImage(this);" event in.
Logged
Re: Javascripting hree
« Reply #4 on: August 21, 2008, 09:41:40 pm »
  • *
  • Reputation: +0/-0
  • Offline Offline
  • Gender: Male
  • Posts: 29
Also also (ack) is this only for a single image and only affects that specific image or will it change all images with the onclick="yay" thingy?
Logged
  • _D_W_ RP Archives
Re: Javascripting hree
« Reply #5 on: August 21, 2008, 09:43:58 pm »
  • *
  • Reputation: +3/-0
  • Offline Offline
  • Gender: Male
  • Posts: 6629
Works on each image independently.
Logged
Re: Javascripting hree
« Reply #6 on: August 21, 2008, 09:47:46 pm »
  • *
  • Reputation: +0/-0
  • Offline Offline
  • Gender: Male
  • Posts: 29
Yay.  Thank you for helping me and answering all my questions :D!
Logged
  • _D_W_ RP Archives
Re: Javascripting hree
« Reply #7 on: August 22, 2008, 12:52:50 am »
  • *
  • Reputation: +0/-0
  • Offline Offline
  • Gender: Male
  • Posts: 29
Oh blah.  How exactly do I make it so there's two different clickable pictures with their own changination?
Logged
  • _D_W_ RP Archives
Re: Javascripting hree
« Reply #8 on: August 22, 2008, 01:18:22 am »
  • *
  • Reputation: +3/-0
  • Offline Offline
  • Gender: Male
  • Posts: 6629
There are better ways of doing this, but I'm half asleep and can't be arsed;

Code: [Select]
function ChangeImage(imgTag, from, to)
{
if (imgTag.src == from)
{
             imgTag.src = to;
}
else
{
             imgTag.src = from;
}
}

<img src="a.png" onclick='ChangeImage(this, "a.png", "b.png");'/>
<img src="a2.png" onclick='ChangeImage(this, "a2.png", "b2.png");'/>
<img src="a3.png" onclick='ChangeImage(this, "a3.png", "b3.png");'/>
<img src="a4.png" onclick='ChangeImage(this, "a4.png", "b4.png");'/>
...etc
Logged
Re: Javascripting hree
« Reply #9 on: August 22, 2008, 01:31:29 am »
  • (y)(;>.<;)(y)
  • *
  • Reputation: +0/-0
  • Offline Offline
  • Gender: Male
  • Posts: 3293
Infini, in firefox and opera at least a problem with that is the image doesn't change. It seems it doesn't actually get the value from the src tag...or at least not the right value.
Logged
Re: Javascripting hree
« Reply #10 on: August 22, 2008, 01:57:43 am »
  • *
  • Reputation: +0/-0
  • Offline Offline
  • Gender: Male
  • Posts: 29
Upon trying the new thing you showed it doesn't work D:!  The other thing did though but hree.
Logged
  • _D_W_ RP Archives
Re: Javascripting hree
« Reply #11 on: August 22, 2008, 10:10:31 am »
  • *
  • Reputation: +3/-0
  • Offline Offline
  • Gender: Male
  • Posts: 6629
I did say 'something like this' you know, I didn't test any of it, I was only giving you a pointer in the general direction. You need to learn to do stuff like this yourself. Anyway;

Code: [Select]

<html>
<head>
<script language="JavaScript" type="text/javascript">

function ChangeImage(imgTag, from, to)
{
if (imgTag.src.substring(imgTag.src.length - to.length) == to)
{
imgTag.src = from;
}
else
{
imgTag.src = to;
}
}

</script>
</head>
<body>

<img src="a.png" onclick='ChangeImage(this, "a.png", "b.png");'/>

</body>
</html>


Now that does work, I've tested it.
Logged
Re: Javascripting hree
« Reply #12 on: August 22, 2008, 10:28:55 am »
  • *
  • Reputation: +0/-0
  • Offline Offline
  • Posts: 2245
Code: [Select]
<script>
function ChangeImage(imgTag, to)
{
if(imgTag.oldsrc == null)
imgTag.oldsrc = to;

temp = imgTag.src;
imgTag.src = imgTag.oldsrc;
imgTag.oldsrc = temp;
}
</script>

<img src="a.png" onclick="ChangeImage(this, 'b.png');" />
Here's how i would do it, don't forget that html elements and !@#$% also count as objects, so you can declare your own variables in them as well.
Logged
Re: Javascripting hree
« Reply #13 on: August 22, 2008, 10:36:54 am »
  • *
  • Reputation: +3/-0
  • Offline Offline
  • Gender: Male
  • Posts: 6629
Quote from: Windy on August 22, 2008, 10:28:55 am
Code: [Select]
<script>
function ChangeImage(imgTag, to)
{
if(imgTag.oldsrc == null)
imgTag.oldsrc = to;

temp = imgTag.src;
imgTag.src = imgTag.oldsrc;
imgTag.oldsrc = temp;
}
</script>

<img src="a.png" onclick="ChangeImage(this, 'b.png');" />
Here's how i would do it, don't forget that html elements and !@#$% also count as objects, so you can declare your own variables in them as well.
lol, you can? I never knew that.
Logged
Re: Javascripting hree
« Reply #14 on: August 22, 2008, 03:24:47 pm »
  • Minalien
  • *
  • Reputation: +10/-1
  • Offline Offline
  • Gender: Female
  • Posts: 2119
http://www.huddletogether.com/projects/lightbox2/

LightBox2 Gallery system.
Sexy, popular, and it accomplishes pretty much what you want. Might want to look at it.
Logged
Quote
There's such a double standard about religion in the modern world. Catholics can gather, wear white robes, and say "In nomine Patris, et Filii, et Spiritus Sancti" and be considered normal.

But if my friends and I gather, wear black robes, and say  "Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn", we're considered cultists.
  • Development Blog

Xiphirx

wat
Re: Javascripting hree
« Reply #15 on: August 22, 2008, 04:04:42 pm »
  • Xiphirx
  • *
  • Reputation: +0/-0
  • Offline Offline
  • Gender: Male
  • Posts: 3007
Code: [Select]
<html>
<head>
<title> JS Image swap example </title>
<script type="text/javascript" language="JavaScript">
var i=1;
var maximg = the maximum amount of images you have (last case number);
function SwapImage(obj)
{
switch (i)
{
case 0:
obj.src = "image"; i=i+1;
break;
case 1:
obj.src = "image"; i=i+1;
break;
case 2:
obj.src = "image"; i=i+1;
break;
}
if (i > maximg) { i=0; }
}
</script>
</head>
<body>
<img src="image" OnClick="SwapImage(this);" />

That should do. I whipped it up in five minutes.

Logged
  • For The Swarm
Re: Javascripting hree
« Reply #16 on: August 22, 2008, 09:31:28 pm »
  • *
  • Reputation: +0/-0
  • Offline Offline
  • Gender: Male
  • Posts: 29
Yay!  Thanks for the help everyone :D!  I have workage~
Logged
  • _D_W_ RP Archives
Pages: [1]   Go Up
« previous next »

 


Contact Us | Legal | Advertise Here
2013 © ZFGC, All Rights Reserved


Page created in 0.098 seconds with 71 queries.