#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    129
    Rep Power
    11

    Change Image based on dt or dd hover.


    I am working on creating a website for a client. The website is for there restaurant and I want to make the menu for the restaurant somewhat interactive.

    The menu right now is set up in definition list because later I will use media queries and Jquery to collapse DD until the DT is clicked on, for the mobile site. But for the regular desktop site I would like for an image that is above to change when the user hovers over the DD or DT that corresponds with that image.


    I hope this makes sense. you can check out what I mean by going to.

    Testing Site

    currently when you hover over anything in the list the image should change. Well it goes to a blank image because I was just replacing the attributes and that doesn't seem to work.

    What would be the better way to go about this. I have thought about placing all of the images in the file in a UL and name the titles of the images a unique name. Then in the give an id to the DD and DT that corrisponds with that image. Then just displaying and not display those images based on which one is hovered.

    Any help would be greatly appreciated.

    Hope this makes sense Its late Im tired I will fix it tomorrow to better clarify If I need to.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,151
    Rep Power
    183
    I just posted all of your code; so you could see how I structured it, but this should work for you. I also included a background image (in this reply) for this demo, as well.

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <link rel="stylesheet" href="styles/styles.css"/>
    <script src="js/responsiveslides.min.js"></script>
    <title>Alejandro's Grill & Cantina</title>
    </head>
    
    <body>
    <div id="wrapper">
       <header>
          <div id="head-wrap"> <a href="./"><img src="images/Alejandros.png" width="270" height="181" alt="Alejandro's"></a>
             <div class="social"> <a href="https://twitter.com/cjtooker" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @twitterapi</a>
                <div class="fb-subscribe" data-href="https://www.facebook.com/zuck" data-layout="button_count" data-show-faces="false" data-font="arial"></div>
             </div>
             <nav>
                <ul>
                   <li><a href="index.html">home</a></li>
                   <li><a href="menu.html">Our Food</a></li>
                   <li><a href="#">About Us</a></li>
                   <li><a href="#">Social</a></li>
                </ul>
             </nav>
          </div>
       </header>
       <div id="content">
          <div id="main">
             <div id="img-scroller">
             	<img src="images/scroller/Restaurant.jpg" width="620" height="432" alt="Temp Restaurant">
             </div>
             <div class="box" id="side-box">
                <h2>Alejandro's Menu</h2>
                <div class="tagline">
                   <h3 class="box-sub">Our Motto</h3>
                   <p>Here at Alejando's Grill and Cantina we strive to create delicious food.<br>
                      Need more here. Dont really know what to say. </p>
                   <h3 class="box-sub">Our Menu</h3>
                   <p>You can easily and quickly change the plate in the picure on the left by simply clicking on an item below.<br>
                      If you would like to look at the complete menu click on one of these two buttons.</p>
                </div>
             </div>
          </div>
          <aside>
             <nav class="menu">
                <ul>
                   <li><a href="#">Appetizers</a></li>
                   <li><a href="#">Hot Off The Grill</a></li>
                   <li><a href="#">Specialty Dinners</a></li>
                   <li><a href="#">Desserts & Beverages</a></li>
                   <li><a href="#">Daily Lunch Specials</a></li>
                   <li><a href="#">American Favorites</a></li>
                </ul>
             </nav>
             <h1>Appetizers</h1>
             <div class="box menu-list">
             	<h2>Classic</h2>
                <dl>
                	<dt>Skillet Queso 7.99</dt>
                   <dd>Served in a skillet with flour or corn tortillas.</dd>
                   <dt>Queso 3.99</dt>
                   <dd>Our homemade Mexican Queso</dd>
                   <dt>Quesadillas</dt>
                   <dd>Cheese, shredded chicken or seasoned ground beef. Served with pico de gallo, sour cream & guacamole</dd>
                </dl>
             </div>
          </aside>
       </div>
       <footer>
       <p>address goes in here as well as links and copyright.   I want to link to my site as well will be centered with the rest of the stuff above</p>
    </footer>
    </div>
    
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=414604455261788";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script> 
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    
    <script>
    $(".menu-list dt").hover(
    	function(e) {
    		$(this).css("border-color", "#9b1826");
    		$(this).next("dd").css("border-color", "#9b1826");
    		$(this).next("dd").css("background", "rgb(155,24,38)");
    		$(this).next("dd").css("backgroundImage","url(bg.PNG)");
    		$(this).next("dd").css("background-repeat","repeat-x");
    	},
    	function(e) {
       		$(this).removeAttr("style");
    		$(this).next("dd").removeAttr("style");
    	}
    );
    
    $(".menu-list dd").hover(
    	function(e) {
    		$(this).css("background", "rgb(155,24,38)");
    		$(this).css("backgroundImage","url(bg.PNG)");
    		$(this).css("background-repeat","repeat-x");
       		$(this).css("border-color", "#9b1826");
    		$(this).prev("dt").css("border-color", "#9b1826");
    	},
    	function(e) {
    		$(this).removeAttr("style");
    		$(this).prev("dt").removeAttr("style");
    	}
    );
    </script>
    
    </body>
    </html>
    Attached Images
    • File Type: png bg.PNG (287 Bytes, 35 views)
    Last edited by web_loone08; October 31st, 2012 at 10:05 PM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    129
    Rep Power
    11
    Thanks for the help but I guess I was right when I said I wasn't being very clear.

    You see the big image at the top of the page, the picture of the restaurant. That image will be the picture of the first meal on the list when the page loads. I then want that image to change to another image when the user hovers over a meal in the list at the bottom.

    For the home page I use a simple jquery slideshow plugin called responsive slides and I am trying to manipulate that plugin now to make the hovering of the meals works like the clicking of the navigation buttons would do in that plugin.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,151
    Rep Power
    183
    Try something like this:

    Code:
    $(".menu-list dt").eq(0).hover(
    	function(e) {
    		$("#img-scroller img").eq(0).attr("src", "images/scroller/skillet.jpg"); 
    	},
    function(e) {
       	$("#img-scroller img").eq(0).attr("src", "images/scroller/Restaurant.jpg"); 
    	}
    );
    
    $(".menu-list dd").eq(0).hover(
    	function(e) {
    		$("#img-scroller img").eq(0).attr("src", "images/scroller/skillet.jpg"); 
    	},
    function(e) {
       	$("#img-scroller img").eq(0).attr("src", "images/scroller/Restaurant.jpg"); 
    	}
    );
    
    $(".menu-list dt").eq(1).hover(
    	function(e) {
    		$("#img-scroller img").eq(0).attr("src", "images/scroller/queso.jpg"); 
    	},
    function(e) {
       	$("#img-scroller img").eq(0).attr("src", "images/scroller/Restaurant.jpg"); 
    	}
    );
    
    $(".menu-list dd").eq(1).hover(
    	function(e) {
    		$("#img-scroller img").eq(0).attr("src", "images/scroller/queso.jpg"); 
    	},
    function(e) {
       	$("#img-scroller img").eq(0).attr("src", "images/scroller/Restaurant.jpg"); 
    	}
    );
    
    $(".menu-list dt").eq(2).hover(
    	function(e) {
    		$("#img-scroller img").eq(0).attr("src", "images/scroller/quesadillas.jpg"); 
    	},
    function(e) {
       	$("#img-scroller img").eq(0).attr("src", "images/scroller/Restaurant.jpg"); 
    	}
    );
    
    $(".menu-list dd").eq(2).hover(
    	function(e) {
    		$("#img-scroller img").eq(0).attr("src", "images/scroller/quesadillas.jpg"); 
    	},
    function(e) {
       	$("#img-scroller img").eq(0).attr("src", "images/scroller/Restaurant.jpg"); 
    	}
    );
    Last edited by web_loone08; November 1st, 2012 at 03:36 PM.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    129
    Rep Power
    11
    Thanks I'm pretty new to jquery and forgot about eq. you idea works great but I think I can add to it a little to make it better. I will post my code when I finish it.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    129
    Rep Power
    11
    Okay well I changed up how it works and thanks to you informing me of eq I have it working how I like. I might change this over to change the picture when the user clicks but I will decide that later.

    New Menu

    Basically since I already use the responsive slider jquery plugin on the home page I just included it here as well and set the auto to false.

    Code:
    <div id="img-scroller">
       <ul class="rslides">
           <li><img src="images/scroller/Restaurant.jpg" width="620" height="432" alt="Temp Restaurant"></li>
           <li><img src="images/scroller/restaurant1.jpg" width="620" height="432" alt="Temp Restaurant"></li>
           <li><img src="images/scroller/restaurant2.jpg" width="620" height="432" alt="Temp Restaurant"></li>
           <li><img src="images/scroller/restaurant3.jpg" width="620" height="432" alt="Temp Restaurant"></li>
      </ul>
    </div>
    responsive slides works by displaying the li as a list item and removing the other. So after looking through its code I can add this and it works the way I want.

    Code:
    <script>
    $(document).ready(function(e) {
        $(".rslides").responsiveSlides({
    	 	auto: false
    	 });
    	// hover the dt. change border color of dt and dd, change image above as well. 
    	// when un hover remove the style attribute
    	$(".menu-list dt").hover(
    		function(e) {
    			//get the index of the curent dt
    			var index = $("dt").index(this);
    			
    			//change the styles and class of the old image and the new image
    			$(".rslides1_on").css({'float' : 'none', 'display' : 'none', 'position' : 'absolute'}).removeClass("rslides1_on");
    			$(".rslides li").eq(index).css({'float' : 'left', 'display' : 'list-item', 'position' : 'relative'}).addClass("rslides1_on"); 
    			
    			//change the border color of the hovered dt and corresponding dd
    			$(this).css("border-color", "#9b1826");
    			$(this).next("dd").css("border-color", "#9b1826");
    		},
    		function(e) {
    			//remove the color of the dt and dd
    			$(this).removeAttr("style");
    			$(this).next("dd").removeAttr("style");
    		}
    	);
    	
    	// hover the dd. change border color of dt and dd, change image above as well. 
    	// when un hover remove the style attribute
    	$(".menu-list dd").hover(
    		function(e) {
    			//get the index of the curent dd
    			var index = $("dd").index(this);
    			
    			//change the styles and class of the old image and the new image
    			$(".rslides1_on").css({'float' : 'none', 'display' : 'none', 'position' : 'absolute'}).removeClass("rslides1_on");
    			$(".rslides li").eq(index).css({'float' : 'left', 'display' : 'list-item', 'position' : 'relative'}).addClass("rslides1_on");
    			
    			//change the border color of the hovered dd and corresponding dt
    			$(this).css("border-color", "#9b1826");
    			$(this).prev("dt").css("border-color", "#9b1826");
    		},
    		function(e) {
    			//remove the color of the dd and dt
    			$(this).removeAttr("style");
    			$(this).prev("dt").removeAttr("style");
    		}
    	);
    });
    
    </script>
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,151
    Rep Power
    183
    That's good; glad you got it working the way you want it to.

IMN logo majestic logo threadwatch logo seochat tools logo