Liquid_1520 Posted July 13, 2010 Share Posted July 13, 2010 So, I have a div class called blah and I have some links to the side, when you click a link, it'll put an image where blah is. So I think it's something like triggers: '#blah-trigger'; element: '#blah'; switcher: function(0, opts) anyone able to link me to a place that can give me more information on this? Link to comment Share on other sites More sharing options...
obfuscator Posted July 13, 2010 Share Posted July 13, 2010 http://w3schools.com/js/default.asp This is a decent resource - play around a bit. "It's not a rest for me, it's a rest for the weights." - Dom Mazzetti Link to comment Share on other sites More sharing options...
Clooth Posted August 31, 2010 Share Posted August 31, 2010 You can easily do this with jQuery. First, have the IMG element have ID attribute with the name of your choosing, then have a list of links (A) that have the link/source of the image contained within an attribute like REF. <img id="blah" src="http://www.iconarchive.com/icons/deleket/halloween-avatars/256/Scream-icon.png" /> <ul id="blah-links"> <li><a href="#" rel="http://img159.imageshack.us/img159/3129/worldsfinest6as.jpg">Image 1</a></li> <li><a href="#" rel="http://avatarfarm.com/avatarimages/cartoons/calvinhobbesavatar.jpg">Image 2</a></li> <li><a href="#" rel="http://avatarfarm.com/avatarimages/animatedimages/dancingcactusavatar.gif">Image 3</a></li> <li><a href="#" rel="http://avatarfarm.com/avatarimages/people/facelessavatar.gif">Image 4</a></li> </ul> Use jQuery's event binding methods to grab all the links and just simply change the SRC attribute of the IMG tag which has the ID. <script type="text/javascript"> // Run the following code only when the document is "read", as in loaded completely. $(document).ready(function() { // Take the list element (ul) with the id "blah-links", then it's link (a) elements, and bind a click event to all of them $('#blah-links a').bind('click', function() { // Take the image element which had the "blah" id attribute, and change its attribute called "src" to the "rel" attribute of the link you just clicked. $('#blah').attr('src', $(this).attr('rel')); // Prevent the link from executing it's original behaviour (taking you to the linked page, which in this case is only an anchor, and wouldn't go anywhere) return false; }); }); </script> Here's an example using an online tester application: http://jsfiddle.net/2bJrv/ More information about jQuery and it's click events: http://api.jquery.com/click/http://api.jquery.com/attr/http://api.jquery.com/ -- Hope I didn't misunderstand your problem. If you have any further questions or problems, ask and I'll be happy to help you out. ;) Best regards,Nico Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now