Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 05-22-2013, 08:45 AM
UnP0ssible UnP0ssible is offline
Contributing Member
 
Join Date: 08-01-08
Posts: 134
iTrader: 0 / 0%
Change image onclick

So basically I want to have a series of buttons made from images. Say all the images would be grey boxes. I want to have it so when you click one of the images it changes to a blue box. But if you click another, then the one you click turns into a blue box and the other one that was blue goes back to grey.

Anyone know how?

Last edited by UnP0ssible; 05-22-2013 at 09:07 AM.
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 05-22-2013, 10:38 AM
J. H. Rasmussen J. H. Rasmussen is online now
Super Moderator
 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 6,003
iTrader: 1 / 100%
Here is an example with javascript and div-containers:
HTML Code:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled</title> <style type="text/css"> div.img_btns { width: 100px; height: 40px; line-height: 40px; vertical-align: middle; text-align: center; background: gray; float: left; margin: 2px; } div.img_btns:hover { cursor: pointer; } </style> </head> <body> <script type="text/javascript"> var amountOfButtons = 10; function button_clicked(btn_id) { for(var a = 0; a != amountOfButtons; a++) { document.getElementById('btn' + a).style.background = "gray"; } document.getElementById(btn_id).style.background = "blue"; return; } for(var a = 0; a != amountOfButtons; a++) { document.write('<div id="btn' + a + '" class="img_btns" onclick="javascript:button_clicked(\'btn' + a + '\');">Button ' + (a+1) + '</div>'); } </script> </body> </html>
 
Reply With Quote
  #3  
Old 05-22-2013, 11:56 AM
UnP0ssible UnP0ssible is offline
Contributing Member
 
Join Date: 08-01-08
Posts: 134
iTrader: 0 / 0%
Thanks for the response!

Hmmm... the thing is I dont want a background color to change. I have images which I want to change.

So say I have this:

img1a img2a img3a

and I clicked img1a, it would become this:

img1b img2a img3a

and then if I clicked img2a, it would become this:

img1a img2b img3a

make sense..? Sorry if I'm not explaining it well
 
Reply With Quote
  #4  
Old 05-22-2013, 12:25 PM
J. H. Rasmussen J. H. Rasmussen is online now
Super Moderator
 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 6,003
iTrader: 1 / 100%
Ok, edited the example, here is the code:
HTML Code:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled</title> <style type="text/css"> div.img_btns { width: 100px; height: 40px; line-height: 40px; vertical-align: middle; text-align: center; background: gray; float: left; margin: 2px; } div.img_btns:hover { cursor: pointer; } </style> </head> <body> <script type="text/javascript"> var amountOfButtons = 10; function reset_images_to_not_clicked() { for(var a = 0; a != amountOfButtons; a++) { document.getElementById('img' + a).style.background = "url(/images/img" + (a + 1) + "a.jpg)"; } return; } function button_clicked(btn_index) { reset_images_to_not_clicked(); document.getElementById('img' + btn_index).style.background = "url(/images/img" + (btn_index + 1) + "b.jpg)"; return; } for(var a = 0; a != amountOfButtons; a++) { document.write('<div id="img' + a + '" class="img_btns" onclick="javascript:button_clicked(\'' + a + '\');">Button ' + (a+1) + '</div>'); } reset_images_to_not_clicked(); </script> </body> </html>
Filenames of the not clicked images are: img1a.jpg to img10a.jpg

Filenames for clicked images: img1b.jpg to img10b.jpg

So, if i understand you correct, this script should work. If it doesn't work like it should feel free to reply.
 
Reply With Quote
  #5  
Old 05-22-2013, 12:36 PM
UnP0ssible UnP0ssible is offline
Contributing Member
 
Join Date: 08-01-08
Posts: 134
iTrader: 0 / 0%
this is what that made
http://esobr.com/website/associate/test.html
 
Reply With Quote
  #6  
Old 05-22-2013, 12:44 PM
J. H. Rasmussen J. H. Rasmussen is online now
Super Moderator
 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 6,003
iTrader: 1 / 100%
So now you just need to make the button images, name the images like i showed you in post #4. It will not work without the images. When you have created the images, then upload them to /images/ on your server, or change the path in the script.
 
Reply With Quote
  #7  
Old 05-22-2013, 12:49 PM
UnP0ssible UnP0ssible is offline
Contributing Member
 
Join Date: 08-01-08
Posts: 134
iTrader: 0 / 0%
Hmm I did do that... maybe I did it wrong give me a bit
 
Reply With Quote
  #8  
Old 05-22-2013, 12:52 PM
UnP0ssible UnP0ssible is offline
Contributing Member
 
Join Date: 08-01-08
Posts: 134
iTrader: 0 / 0%
See the images are uploaded http://esobr.com/website/associate/images/img1b.jpg

did I do anything wrong?

Last edited by J. H. Rasmussen; 05-22-2013 at 12:55 PM.
 
Reply With Quote
  #9  
Old 05-22-2013, 12:53 PM
J. H. Rasmussen J. H. Rasmussen is online now
Super Moderator
 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 6,003
iTrader: 1 / 100%
Yep, it should be: http://esobr.com/images/img4a.jpg

You want me to change the script so i works with the path you are using?

Last edited by J. H. Rasmussen; 05-22-2013 at 01:00 PM.
 
Reply With Quote
  #10  
Old 05-22-2013, 01:03 PM
UnP0ssible UnP0ssible is offline
Contributing Member
 
Join Date: 08-01-08
Posts: 134
iTrader: 0 / 0%
the images are changing weird... if you click img2a.jpg it becomes img11b.jpg...

is that what it should do?
 
Reply With Quote
  #11  
Old 05-22-2013, 01:04 PM
J. H. Rasmussen J. H. Rasmussen is online now
Super Moderator
 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 6,003
iTrader: 1 / 100%
Nope, i will take a look at it.
 
Reply With Quote
  #12  
Old 05-22-2013, 01:14 PM
J. H. Rasmussen J. H. Rasmussen is online now
Super Moderator
 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 6,003
iTrader: 1 / 100%
This image doesn't exist: http://esobr.com/website/associate/images/img5a.jpg

How many button images do you have?
 
Reply With Quote
  #13  
Old 05-22-2013, 01:19 PM
UnP0ssible UnP0ssible is offline
Contributing Member
 
Join Date: 08-01-08
Posts: 134
iTrader: 0 / 0%
img10a img10b img1a img1b img2a img2b img3a img3b img4a img4b
 
Reply With Quote
  #14  
Old 05-22-2013, 01:22 PM
UnP0ssible UnP0ssible is offline
Contributing Member
 
Join Date: 08-01-08
Posts: 134
iTrader: 0 / 0%
ok now they are all up
 
Reply With Quote
  #15  
Old 05-22-2013, 01:26 PM
J. H. Rasmussen J. H. Rasmussen is online now
Super Moderator
 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 6,003
iTrader: 1 / 100%
How many buttons should the script create?

Now it's creating 10, which is, for the not clicked images: img1a.jpg, img2a.jpg, img3a.jpg, img4a.jpg, img5a.jpg, img6a.jpg, img7a.jpg, img8a.jpg, img9a.jpg, img10a.jpg.

And for the clicked images: img1b.jpg, img2b.jpg, img3b.jpg, img4b.jpg, img5b.jpg, img6b.jpg, img7b.jpg, img8b.jpg, img9b.jpg, img10b.jpg.

So, how many buttons do you have images for? Should it be 4 buttons? or are you gonna change img10a.jpg, img10b.jpg to img5a.jpg, img5b.jpg so we can use 5? or any other number of images?
 
Reply With Quote
  #16  
Old 05-22-2013, 01:31 PM
UnP0ssible UnP0ssible is offline
Contributing Member
 
Join Date: 08-01-08
Posts: 134
iTrader: 0 / 0%
all of these are made

img1a.jpg, img2a.jpg, img3a.jpg, img4a.jpg, img5a.jpg, img6a.jpg, img7a.jpg, img8a.jpg, img9a.jpg, img10a.jpg.

img1b.jpg, img2b.jpg, img3b.jpg, img4b.jpg, img5b.jpg, img6b.jpg, img7b.jpg, img8b.jpg, img9b.jpg, img10b.jpg

but clicking any of them reveals an image that is not present in that list
 
Reply With Quote
  #17  
Old 05-22-2013, 01:32 PM
J. H. Rasmussen J. H. Rasmussen is online now
Super Moderator
 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 6,003
iTrader: 1 / 100%
Now there is one error, you need to change:
HTML Code:
document.getElementById('img' + btn_index).style.background = "url(/images/img" + (btn_index + 1) + "b.jpg)";
To:
HTML Code:
document.getElementById('img' + btn_index).style.background = "url(http://esobr.com/website/associate/images/img" + (parseInt(btn_index) + 1) + "b.jpg)";
Then the button images should work. Other things you want to happen with the script?
 
Reply With Quote
  #18  
Old 05-22-2013, 01:37 PM
UnP0ssible UnP0ssible is offline
Contributing Member
 
Join Date: 08-01-08
Posts: 134
iTrader: 0 / 0%
Also, am I able to make these buttons a href links? Is that possible?

Thanks for all the help mate!
 
Reply With Quote
  #19  
Old 05-22-2013, 01:43 PM
J. H. Rasmussen J. H. Rasmussen is online now
Super Moderator
 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 6,003
iTrader: 1 / 100%
I'm looking into it...
 
Reply With Quote
  #20  
Old 05-22-2013, 01:57 PM
J. H. Rasmussen J. H. Rasmussen is online now
Super Moderator
 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 6,003
iTrader: 1 / 100%
Here is another more search engine friendly version with links:
HTML Code:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled</title> <style type="text/css"> span.img_btns { width: 100px; height: 80px; display: block; line-height: 80px; vertical-align: middle; text-align: center; background: gray; float: left; margin: 2px; } div.img_btns:hover { cursor: pointer; } </style> </head> <body> <a href="/"><span id="img0" class="img_btns" style="background: url(http://esobr.com/website/associate/images/img1a.jpg);" onclick="javascript:button_clicked('0');">Button 1</span></a> <a href="/"><span id="img1" class="img_btns" style="background: url(http://esobr.com/website/associate/images/img2a.jpg);" onclick="javascript:button_clicked('1');">Button 2</span></a> <a href="/"><span id="img2" class="img_btns" style="background: url(http://esobr.com/website/associate/images/img3a.jpg);" onclick="javascript:button_clicked('2');">Button 3</span></a> <a href="/"><span id="img3" class="img_btns" style="background: url(http://esobr.com/website/associate/images/img4a.jpg);" onclick="javascript:button_clicked('3');">Button 4</span></a> <a href="/"><span id="img4" class="img_btns" style="background: url(http://esobr.com/website/associate/images/img5a.jpg);" onclick="javascript:button_clicked('4');">Button 5</span></a> <a href="/"><span id="img5" class="img_btns" style="background: url(http://esobr.com/website/associate/images/img6a.jpg);" onclick="javascript:button_clicked('5');">Button 6</span></a> <a href="/"><span id="img6" class="img_btns" style="background: url(http://esobr.com/website/associate/images/img7a.jpg);" onclick="javascript:button_clicked('6');">Button 7</span></a> <a href="/"><span id="img7" class="img_btns" style="background: url(http://esobr.com/website/associate/images/img8a.jpg);" onclick="javascript:button_clicked('7');">Button 8</span></a> <a href="/"><span id="img8" class="img_btns" style="background: url(http://esobr.com/website/associate/images/img9a.jpg);" onclick="javascript:button_clicked('8');">Button 9</span></a> <a href="/"><span id="img9" class="img_btns" style="background: url(http://esobr.com/website/associate/images/img10a.jpg);" onclick="javascript:button_clicked('9');">Button 10</span></a> <script type="text/javascript"> var amountOfButtons = 10; function button_clicked(btn_index) { for(var a = 0; a != amountOfButtons; a++) { document.getElementById('img' + a).style.background = "url(http://esobr.com/website/associate/images/img" + (a + 1) + "a.jpg)"; } document.getElementById('img' + btn_index).style.background = "url(http://esobr.com/website/associate/images/img" + (parseInt(btn_index) + 1) + "b.jpg)"; return; } </script> </body> </html>
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Changing Opacity without changing the text or images stormshadow Coding Forum 3 01-21-2013 05:17 AM
Iframe size change onclick UnP0ssible Coding Forum 2 01-26-2012 08:37 PM
iframe content ezestseo SEO Forum 3 10-25-2010 10:29 PM
Is There Any Change In Google Images Algo pakistanvoices Google Forum 9 08-27-2010 03:22 AM
Will Drastic change in keyword across tags and content change search engine ranking ? anandrao SEO Forum 3 03-25-2010 02:34 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 02:58 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC