Results 1 to 2 of 2

Thread: Looking for JQuery script to manage image swaps.

  1. #1
    Join Date
    Feb 2012
    Posts
    36
    Thanks
    16
    Thanked 1 Time in 1 Post

    Default Looking for JQuery script to manage image swaps.

    If someone could provide me with a working script or point me in the right direction that would be appreciated (I tip $ too!).

    I'm working on designing an interactive university campus map and need some direction with what I am looking to do.

    Link to page: http://www.torontoclassfind.com/startpage.html

    I want to be able to click on the links in the top menu (only one link is active so far and it loads and Ajax page in lower left div) and have it swap the building image on the map with a different image to show that it's been selected.

    I could do that with the following:

    Code:
    $("#buildinglink1").click(function () {
       $(#buildingimg1).attr("src","highlightedimage.gif")
    })
    Problem is I need to change back the image to it's default image once another menu link is clicked and a new building is selected.

    The building images are located at www.torontoclassdfind.com/building/ and the highlighted images are located at www.torontoclassdfind.com/buildingc/ and the names for the buildings are the same in both locations.

    I am thinking of using JQuery's .replace element to do this (ex: http://stackoverflow.com/questions/6...ve-part-of-url) which would remove or add the 'c' to the url, but I'm kind of lost from here.

    I think I need to make a function that would indicated a link is selected and somehow merge it with the .replace element.

    Any input is appreciated!

    Note: Have another thread going here: http://stackoverflow.com/questions/1...le-image-swaps though still haven't implemented a solution just yet..
    Last edited by GSimon; 12-16-2012 at 10:44 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var $buildings = $('#buildings img');
    	$buildings.click(function(e){
    		$buildings.each(function(){
    			this.src = '/building/' + this.alt + '.gif';
    		});
    		this.src = '/buildingc/' + this.alt + '.gif';
    		e.preventDefault(); 
    	});
    });
    </script>
    </head>
    <body>
    <div id="buildings">
    <a href="#"><img src="/building/building1.gif" alt="building1" title=""></a> 
    <a href="#"><img src="/building/building2.gif" alt="building2" title=""></a> 
    </div>
    </body>
    </html>
    Any questions, just ask.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Default onClick image swaps with loop
    By croberts in forum Looking for such a script or service
    Replies: 3
    Last Post: 07-15-2012, 04:04 PM
  2. multiple div swaps on the same page
    By deathbycheese in forum Looking for such a script or service
    Replies: 1
    Last Post: 05-02-2011, 09:22 PM
  3. manage page with php
    By jangkoo in forum PHP
    Replies: 3
    Last Post: 07-14-2010, 02:18 AM
  4. onClick image swaps with loop
    By jkap in forum JavaScript
    Replies: 7
    Last Post: 09-15-2008, 09:05 PM
  5. Using image swaps with left / right conveyor belt script
    By Seasick Misery in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 10-03-2007, 01:14 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •