Link to home
Start Free TrialLog in
Avatar of ilyrian
ilyrian

asked on

How do i use Javascript / jquery to fire click and hover event on the same link

Hi,

I have a situation in which when I hover over a div with a link in it eg BannerM.jpg. (<div id="li1"><a href="Images/large/BannerMain.jpg"><img src="Images/small/BannerM.jpg"/> </a></div> the BannerMain.jpg image appears. This is fine so far however I would also like to use the link image (BannerM.jpg) as a normal link to link me to another page. In other words when I hover on it makes the large image appear and when I click on it I would like it to act as a normal link and redirect to another page instead of opening the big image on its own.  

Below is the jquery script that I am using:

<script type="text/javascript">
        $(document).ready(function() {

            $('#li1 img').each(function(i) {
                var imgFile = $(this).attr('src');
                var preloadImage = new Image();
                var imgExt = /(\.\w{3,4}$)/;
                preloadImage.src = imgFile.replace(imgExt, '_h$1');

                $(this).hover(
            function() {
                $(this).attr('src', preloadImage.src);
            },
            function() {
                var currentSource = $(this).attr('src');
                $(this).attr('src', imgFile);
            });
            });

            $('#li1 a').hover(function(evt) {
                //don't follow link
                evt.preventDefault();
                //get path to new image
                var imgPath = $(this).attr('href');
                //get reference to old image
                var oldImage = $('#photo img');
                //check to see if they're the same image
                if (imgPath == oldImage.attr('src')) {
                    //if they are then you're done
                    return;
                } else {
                    //remove highglight from previously clicked thumbnail
                    $('.selected').removeClass('selected');
                    //add highlight to this thumbnail
                    $(this).addClass('selected');
                    //create HTML for new image
                    var newImage = $('<img src="' + imgPath + '">');
                    //make new image invisible
                    newImage.hide();
                    //add to the #photo div
                    $('#photo').prepend(newImage);
                    //fade out old image and remove from DOM
                    oldImage.fadeOut(1000, function(obj) {
                        $(this).remove();
                    });
                    //fade in new image
                    newImage.fadeIn(1000);
                }
            });
            $('#li1 a:eq(0)').hover();
        });
</script>

I guest I need a click event somewhere here but so far I have not been able to make it work.

Thank you in advance for your help.
ASKER CERTIFIED SOLUTION
Avatar of Hagay Mandel
Hagay Mandel
Flag of Israel image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of ilyrian
ilyrian

ASKER

Hi Hagay,
I do not think using the image as background to the div would work in my scenario but putting click and hover events one after another did the trick.

To prevent the link to the image I reused: evt.preventDefault(); whereas the click event looks something like this:
            $('#li1 a').click(function(evt) {
                //don't follow link
                evt.preventDefault();
                var p1 = 'Images/large/BannerMainPic.jpg';
                var p2 = 'Images/large/BannerSecondPic.jpg';
                var ppath = $(this).attr('href');

                if (ppath == p1) {
                    window.location.href = "SomePage.aspx";
                }
                else if (ppath == p2) {
                    window.location.href = "SomeOtherPage.aspx";
                }
            })


Thanks for your help