www.webdeveloper.com
Results 1 to 4 of 4

Thread: Quick code change from click to a hover control

Hybrid View

  1. #1
    Join Date
    Jul 2008
    Posts
    8

    Quick code change from click to a hover control

    Hi All,

    I have a code which works like an image gallery script, click a button/thumbnail a large image above fades in. I actually want it changed that so instead of clicking the thumbnail you just mouseover and the large image fades in.

    Here is my code, I would really appreciate somebody having a look over it.
    Javascript:
    Code:
    $(function()
    {
        $("#section_select a").click(function()
            {
            var imageSource = $(this).children("img").attr("src");
           
            $("#image_holder").addClass("loading");
            $("#image_holder h3").remove();
              showImage(imageSource);
              return false;
            });
    });
    
    function showImage(src)
    {
    $("#image_holder img").fadeOut("normal").remove();
    var largeImage = new Image();
    $(largeImage).load(function()
                            {
                            $(this)[0].style.display = "none";
                            $("#image_holder").append(this).removeClass("loading");
                                                 
                            $(this).fadeIn("slow");              
                            });    
    $(largeImage).attr("src", src);                                                                               
    }
    HTML:

    HTML Code:
    <div id="feature">
     	 		<div id="image_holder">	 
     	 		<h3>Image Holder</h3>
    	 		</div>
    	 			<div id="section_select"><ul id="nav"><li id="hotel"><a href="#">Hotel<img src="lion2.jpg" alt="Hotel" /></a></a></li><li id="club"><a href="#">Country Club<img src="lion3.jpg" alt="Country Club" /></a></li><li id="spa"><a href="#">Spa<img src="lion4.jpg" alt="Spa" /></a></li><li id="conf"><a href="#">Conference &amp; Banqueting<img src="lion5.jpg" alt="Conference and Banqueting" /></a></li><li id="wedding"><a href="#">Weddings<img src="lion6.jpg" alt="Weddings" /></a></li></ul>
    	 			</div>
    </div>
    Thanks for taking the time to look.

    Adam

  2. #2
    Join Date
    Jan 2009
    Posts
    17
    Hi Adam,
    Why are there 2 closing anchor tags here:

    Code:
    <li id="hotel"><a href="#">Hotel<img src="lion2.jpg" alt="Hotel" /></a></a></li>

  3. #3
    Join Date
    Jul 2008
    Posts
    8

    Finger Trouble

    Coda autocompletes tags, not used to it, coded the extra closing tag by mistake.

    Ad

  4. #4
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    To answer the original question, adamb, mostly likely all you need to do is change
    Code:
    $("#section_select a").click(function()
    to
    Code:
    $("#section_select a").mouseover(function()
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles