Jump to content
Sign in to follow this  
Liquid_1520

Javascript

Recommended Posts

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?


stry1.png

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.