Jump to content

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
Link to comment
Share on other sites

  • 1 month later...

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

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
×
×
  • Create New...

Important Information

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