Jump to content
Larry Ullman's Book Forums

Change Another Image On Link Hover


Recommended Posts

Hi,

 

My product page (output) in HTML is something like this:

 

ProductImage1            ProductImage2          ProductImage3            ProductImage4

Color1  Color2             Color3  Color4                                                  Color2  Color5  Color6

 

What I'm trying to do is when I hover my mouse over any color above, an original (main) image of ProductImage will switch to another image (to match the hovered color). And that original image will be back when the mouse leaves. 

Example: http://jsfiddle.net/4dK2x/27/

 

I also added another hover function on ProductImage for switching images between front view and back view and it's working well. (You would see the two src attributes of the .main class image in my php code as follows)

 

However, the hover function on colors is not working when I run php code to create a dynamic list. 

 

Here are my category.php.

----

$sql = mysqli_query($db_connect, "SELECT p.id,p.style,c.color_palette, GROUP_CONCAT(DISTINCT CONCAT(c.color_palette) ORDER BY p.id SEPARATOR '+') color_palettes FROM product_details AS pd INNER JOIN products AS p ON p.id=pd.product_id INNER JOIN colors AS c ON c.id=pd.color_id INNER JOIN subcategories AS sub ON sub.id=p.subcategory_id INNER JOIN categories AS cat ON cat.id=sub.category_id WHERE category='$category' GROUP BY p.id LIMIT 6");

[...]
$i= 0;
$Output= '<table><tr>'; 
while($row = mysqli_fetch_array($sql, MYSQLI_ASSOC)){
   $id = $row["id"];
   $color_palette = $row["color_palette"];
   $style = $row["style"];
   $color_palettes = explode("+", $row["color_palettes"]);
   

   $Output.= '<td><div class="image"><a href="product.php?id='.$id .'&colorpalette='.$color_palette.'"><img class="main" data-alt-src="images/'.$style.'.'.$color_palette.'.BR.jpg" src="images/'.$style.'.'.$color_palette.'.FR.jpg" width="300" height="327"/></a><br />';

   $Output.= '<div class="toggles">';
   for ($ii=0;$ii<count($color_palettes);$ii++){

   if (count($color_palettes) > 1) {
   $Output.= '<a href="product.php?id='.$id .'&colorpalette='.$color_palettes[$ii].'"><img data-src="images/'.$style.'.'.$color_palettes[$ii].'.FR.jpg" src="images/'.$style.'.'.$color_palettes[$ii].'.CP.jpg" /></a> ';

   } else {
      $Output.= '';}
   } // End for loop
   $Output.= '</div>';
   $Output.='</div></td>';
$i++;
if ($i%4==0){
$Output.= '</tr><tr>';}
} // End while loop
$Output.= '</tr></table>';

----

 

I think my problem is probably because the array $color_palettes[$iiis not defined in .main class image. So if that i the case, what do I do to fix it?

 

Any help would be much appreciated.

Link to comment
Share on other sites

Jane, you're code is really confusing me, and I don't see any JavaScript anywhere.

If you want to do this, you're going to need to use JavaScript.

 

I would recommend storing the alternate image for each color in a data attribute of the corresponding swatches, and when a swatch is moused over, grab that data attribute and set the value as the new src attribute of the product image.

 

That make sense?

Link to comment
Share on other sites

Hartley, I will store the alternate image for each color later. I did have a column for images, but also when I tried to combine variables $style & $color to create names and links for images and it worked. So I thought I would go with it as that way i don't have to create another table for images. The alternate images and colors still work when I switched the code a little bit but somehow hover function on colors are not working.

 

Here are my javascript.

 

//Hover function on ProductImage

var sourceSwap = function () {

    var $this = $(this);

    var newSource = $this.data('alt-src');

    $this.data('alt-src', $this.attr('src'));

    $this.attr('src', newSource);

}

$(function () {

    $('img.main').hover(sourceSwap, sourceSwap);

});

 

// Hover function on colors

 $('.image .toggles img').hover(function () {        

        var src = $(this).attr("data-src");

        var $main = $(this).closest(".image").find(".main");

        $main.attr("toggle", $main.attr("src")).attr("src", src);

    },

    function () {        

        var $main = $(this).closest(".image").find(".main");

        $main.attr("src", $main.attr("toggle"));

    });

Link to comment
Share on other sites

This is generated HTML Hartley. I spaced them for an easier view.

 

<table><tr>

<td><div class="image">

    <a href="product.php?id=2&colorpalette=JJ2BGXX"><img class="main" data-alt-src="images/1431.JJ2BGXX.BR.jpg" src="images/1431.JJ2BGXX.FR.jpg" width="300" height="327" /></a><br />

    <div class="toggles">

        <a href="product.php?id=2&colorpalette=JJ169XX"><img data-src="images/1431.JJ169XX.FR.jpg" src="images/1431.JJ169XX.CP.jpg" /></a> 

        <a href="product.php?id=2&colorpalette=JJ2BGXX"><img data-src="images/1431.JJ2BGXX.FR.jpg" src="images/1431.JJ2BGXX.CP.jpg" /></a> 

    </div>

</div></td>

 

<td><div class="image">

    <a href="product.php?id=3&colorpalette=JJ2EUA0"><img class="main" data-alt-src="images/1791.JJ2EUA0.BR.jpg" src="images/1791.JJ2EUA0.FR.jpg" width="300" height="327" /></a><br />

    <div class="toggles"></div>

</div></td>

 

[same generated for product id 5]

 

<td><div class="image">

    <a href="product.php?id=6&colorpalette=JJ8BSA4"><img class="main" data-alt-src="images/4867.JJ8BSA4.BR.jpg" src="images/4867.JJ8BSA4.FR.jpg" width="300" height="327" /></a><br />

    <div class="toggles"></div>

</div></td>

</tr><tr>

 

[same generated for product id 7]

 

 <td><div class="image">

    <a href="product.php?id=8&colorpalette=JJFR4A1"><img class="main" data-alt-src="images/5375.JJFR4A1.BR.jpg" src="images/5375.JJFR4A1.FR.jpg" width="300" height="327" /></a><br />

    <div class="toggles">

        <a href="product.php?id=8&colorpalette=JJC88A2"><img data-src="images/5375.JJC88A2.FR.jpg" src="images/5375.JJC88A2.CP.jpg" /></a> 

        <a href="product.php?id=8&colorpalette=JJC50XX"><img data-src="images/5375.JJC50XX.FR.jpg" src="images/5375.JJC50XX.CP.jpg" /></a> 

        <a href="product.php?id=8&colorpalette=JJFR4A1"><img data-src="images/5375.JJFR4A1.FR.jpg" src="images/5375.JJFR4A1.CP.jpg" /></a> </div>

</div></td>

</tr></table>

Link to comment
Share on other sites

Your JS logic looks good from what I can tell, but I wonder if the fact you're placing the JS within the head element is causing it to not work.

 

For the sake of debugging the issue, you can either place breakpoints within your code, and step through it line by line, or if you're not sure how to do that, you can try breaking your code up into smaller pieces (i.e., without the jQuery chaining), and console-log things out after each line to confirm the intended behavior. For example:

$('.image .toggles img').hover(function () {        
    var src = $(this).attr("data-src");
    console.log(src);
    
    var $main = $(this).closest(".image").find(".main");
    console.log($main);
    
    $main.attr("toggle", $main.attr("src"));
    console.log($main.attr("toggle"));
    
    $main.attr("src", src);
    console.log($main.attr("src"));
},
function () {        
    var $main = $(this).closest(".image").find(".main");
    console.log($main);
    
    $main.attr("src", $main.attr("toggle"));
    console.log($main.attr("src"));
});
 
Please do that and let us know what you find.
Thanks.
Link to comment
Share on other sites

I copied your example as above and replaced the current one in my javascript file but still see no errors in the browser.

 

I think my problem is probably from php code. From select statement I posted in category.php section, you would see I created two columns related to colors; one is called "color_palette" and the other is "color_palettes" which is group concat by all "color_palette" of each product id. 

 

Within .main class, each variable "$color_palette" I'm using in the src attributes is from column "color_palette". And within .toggles class, each array "$color_palettes[$ii]" in src attrbutes is from the other column, "color_palettes".  

 

When I mouse over each color, the alternate image for each color doesn't show up because each $color_palettes[$ii] does not exist in .main class of the img tag I think. 

 

Any ideas please?

Link to comment
Share on other sites

When you say that you "still see no errors in the browser," are you viewing the console? If you had copied and pasted my code snippet into your code, then you would absolutely see something in the console, unless of course a much larger error occurred, in which case, you wouldn't see the console output because no part of the page would be output to the browser at all.

 

If you don't know how to view the console in your browser, I definitely recommend Googling it right away.

Which browser are you using?

Link to comment
Share on other sites

I pressed F12 (Ctrl+Shift+J) while I'm on the link page and found this.

 

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
panel-1                                                 category.php?category=Dresses:75
 

 

Is it the way of viewing the console in browser? This line (panel-1....) comes from another function that I'm using on a navigation bar. I'm placing it within the <body> tag and it's working.

 

As I mentioned, hover function on ProductImage is working but on colors isn't working even I'm putting them in the same place (within the <head> tag as a link). 

 

I hope this could tell you something. Otherwise, do you think there's something wrong in my php parts? Please let me know if there's anything I could do to trace the errors.

 

Thanks Hartley.

Link to comment
Share on other sites

The only thing I can figure is that for some reason, your jQuery selector isn't matching any elements in the DOM.

Otherwise, I can't imagine how the functionality wouldn't work and you wouldn't get any errors.

 

If you want to set up a test site somewhere, I could look at the code more closely, but barring that, there's really not much else I can do to help.

Sorry.

Link to comment
Share on other sites

It's fine Hartley as I messed things up. I will keep looking around for the answer and let you know if I found one. 

 

I just have one more question. In the php code mentioned above, is it possible to define the array "$color_palettes[$ii]" before the <td> tag (without changing the html output)? So that way I can use it in the src attributes of the .main class instead of within .toggles class only.

 

Thanks

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...