Welcome Guest [Log In] [Register]
Search Members Calendar | Rules ZB Code Index IF Code Index
ZBCode
  • Navigation
  • ZBCode
  • Coding Resources
  • Code Requests
  • Completed Requests
  • [Completed] [ZB] Javascript Help
Hey, welcome to ZBCode, the premier coding forum for ZB. Here you fill find some of the best Invisionfree and Zetaboards Codes on the network! Unfortunately, you're sorta hovering around in guest mode at the moment; why not join in on the fun? Register an account and you can start accessing the wealth of resources we have available here. Enjoy your stay at ZBCode, and remember to tell all your friends about us; the more members, the more codes available. ;)

Interested in joining? Click here.


If you are already a member of ZBCode, feel free to login right here:

Username:   Password:
Locked Topic
[Completed] [ZB] Javascript Help
Tweet Topic Started: Nov 2 2009, 05:51 PM (244 Views)
Joel Nov 2 2009, 05:51 PM Post #1


Posts:
75
Group:
Member
Member
#733
Joined:
Aug 25, 2008
Coding language
HTML/CSS
Hi :)

Ok, I'm using some Javascript to allow me to create a hyperlink that when clicked, will change the image above it, however, it doesnt seem to be working. I got the idea from This website (Tip.it). When you click on the Party Hat colour links and the Masks, they change to the associated colour.

On my webpage, I have the following:
Quote:
 
<img src="http://image1" class="avatar" id="photo">
<br>
<a href="javascript:changeto('photo', 'image2')">Change</a>


This works on the website I got the idea from, but doesnt on my webpage. I looked to see if there was any Javascript connecting with this script that I havent got on my webpage but from what I can see, all I need to do is give the image an ID (which I have "photo") and then that ID goes into the script so it points at that image.

Any ideas?
Offline Profile Goto Top
 
Reid Nov 2 2009, 06:05 PM Post #2
Member Avatar
What? The land of the free? Whoever told you that was your enemy.

Posts:
1,790
Group:
Distinguished Coder
Member
#148
Joined:
Jul 20, 2008
Go to Firebug -> Console (or in Chrome, right click -> inspect element -> press esc once the DOM has loaded) and type in
Code:
 
changeto.toString();
and hit enter. You'll see what powers the code. :)

If you don't have firebug, you can find out more about it (and some other useful stuff) in this topic.
The Resource Board
Offline Profile Goto Top
 
Gorgor Nov 3 2009, 10:01 AM Post #3
Hello

Posts:
1,187
Group:
Former Staff
Member
#2,728
Joined:
Apr 2, 2009
Coding language
PHP
Try this:
Code:
 
function changeto(id){
document.getElementById("photo").src = id
}


Then for the links, make the href
Code:
 
javascript:changeto("IMAGE URL")
Edited by Gorgor, Nov 3 2009, 10:03 AM.
Offline Profile Goto Top
 
Joel Nov 3 2009, 04:44 PM Post #4


Posts:
75
Group:
Member
Member
#733
Joined:
Aug 25, 2008
Coding language
HTML/CSS
Wicked :D That works :D

Anyway to change the Link back and forth?

So for example, when you have the Chat image displaying, the hyperlink below says "Full" to switch to the full avatar image, and then when the Full image displays, the link changes to the "Chat" link. :p

If it's more complicated than a simple If Statement, then dont worry about it :)

Cheers :D
Edited by Joel, Nov 3 2009, 04:46 PM.
Offline Profile Goto Top
 
Gorgor Nov 3 2009, 04:59 PM Post #5
Hello

Posts:
1,187
Group:
Former Staff
Member
#2,728
Joined:
Apr 2, 2009
Coding language
PHP
Code:
 
function changeto(image1, image2){
a = document.getElementById("photo")
b = document.getElementById("urlchange")
if(a.src == image1){
a.src = image2
b.innerHTML = "Chat"
} else {
a.src = image1
b.innerHTML = "Full"
}
}


Make the link
Code:
 
<a href='javascript:changeto("CHAT_IMG_URL","FULL_IMG_URL")' id='urlchange'>Full</a>
Offline Profile Goto Top
 
Joel Nov 4 2009, 05:55 AM Post #6


Posts:
75
Group:
Member
Member
#733
Joined:
Aug 25, 2008
Coding language
HTML/CSS
Works a treat! :D

Cheers dude :D
Offline Profile Goto Top
 
Gorgor Nov 4 2009, 03:20 PM Post #7
Hello

Posts:
1,187
Group:
Former Staff
Member
#2,728
Joined:
Apr 2, 2009
Coding language
PHP
You're welcome.
See? We can read thoughts too. ;)

Your request has been completed, and we're moving it to the correct forum. We hope it works for you; if it doesn't, feel free to post another request topic in the requests forum. Just remember: read the rules first!

Thanks,
The ZBCode Staff
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Completed Requests · Next Topic »
Locked Topic

Track Topic · E-mail Topic Time: 2:26 PM Jul 11
Hosted for free by ZetaBoards · Privacy Policy