Use jquery to add link and hover effect to image

Hello. Can I get some advice as to why this is not working?
I have an image with an id

 <img id="imgLink1" src="/imgs/img1.jpg">

when the user hovers over it i’d like to show a pointer and on click to go to a new page.

<script>
$("imgLink1").hover(function() {
  $( this ).$( this ).css("display","pointer");
});
$("imgLink1").click(function() {
  $( this ).location.href= 'http://www.google.com';
});
</script>

the script looks correct to me, but it isn’t working

$( this ).$( this ).css("display","pointer");

^ Why there is $(this) twice?

$( this ).location.href

^ should be window.location.href

the twice was a typo on my part sorry.

$("imgLink1")

^ ID selector should start with #

ok…

did an alert. the alert shows when i click but the style is not applied.

thank you for pointing me in the right direction. fixed it w/.

$(“#imgLink1”).hover(function() {
$( this ).css(“cursor”,“pointer”);
$( this ).css(“opacity”,“0.7”);

});
$(“#imgLink1”).click(function() {
location.href= ‘otherpage.com’;
});

why dont you use just css for this?

#imgLink1 img:hover{
pointer:cursor;
}

and add the link in html

cursor:pointer :slight_smile: .

But yes, if all he is doing is those CSS changes on hover, that should be in the CSS, not JS :slight_smile: .

Howdy. I’d normally use css. But this was on a carousel where the stake holder wanted only one slide to be hyper-linked. As the solution had to be quick and simple the fastest and easiest thing to do was that few lines of js.

Doh!

:relaxed:

This makes no sense :slight_smile: . You’re referencing the slide via #imgLink1, which is an ID, which means it’s unique, which means CSS would still have been the better option here.

it was the most expedient solution at the time. Yes i could have done it with css and normally would but in this instance just a few line of js felt appropriate.
D

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.