Trying to connect the mouseover of an image to highlight a text link below it in a javascript file

1
votes

I was asked to help fix some things on an older website that was converted from a Flash version and is just being archived for portfolio purposes. I've completed every piece but this one, as I'm not native in javascript.

The page consists of two columns. On the right is an assortment of thumbnails. When you click on the thumbnail, a preview image pops up in the left column preview pane with the name of the artist below it, plus a link to click to more information about the piece on another page.

The link itself changes to white in the hover state. The goal is to also have the link change to the white hover state when you also roll over said preview image.

The existing javascript is this:

//------------------On thumb click-- populate correct preview image and artist credit/link $('img.thumbI').click(function () { //swap image by replacing/renaming src $('#previewImg').attr('src', $(this).attr('src').replace('assets/posters-thumbs/t-', 'assets/posters-2x/')); //generate the detail pg URL var detailURL = 'pages/posterArtist.html?id=' + $(this).attr('id'); // change preview image link $('.previewLink').attr('href', detailURL); //change artist credit line, using the text from the img alt attribute $('.nameInner').html($(this).attr('alt')); //change download link url //$('.dLink').attr('href', detailURL); $('.download').attr('href', detailURL);

    ///----> Flash of white border...timing issue?
    //remove white border from the Glaser preview size --cuz they are circular--
    var artist = $(this).attr('alt');
    
    if (artist == "Milton Glaser"){
       $("#previewPane img").css("border-color", "black"); 
    } else {
        $("#previewPane img").css("border-color", "white");
    }
    
    

});

});

And here is the HTML for the preview pane:

<preview>
            <div id="previewPane">
                <a href="pages/posterArtist.html?id=neumeier1" class="previewLink"><img id="previewImg" src="assets/posters-2x/neu-war.png" width="280" /></a>
            </div>
            <div id="artistCredit">
                <p class="artistName"><span class="nameInner">MARTY NEUMEIER</span> | <a class="download" href="pages/posterArtist.html?id=neumeier1">DOWNLOAD</a></p>
            </div>
        </preview>

I don't even know where to start, and would appreciate some pointers. Many thanks in advance!

Link to an image of what I'm trying to achieve

1
javascripthtmlhovermouseover

1 Answers

1
votes

You can function it out in many functionalities one of such is given below

$(document).on('mouseover','#previewImg',function(){
  $('.download').addClass('white');
});
$(document).on('mouseleave','#previewImg',function(){
  $('.download').removeClass('white');
});

//style
 .white{
   color : #fff;
 }