CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Aleš Hriberšek
Aleš Hriberšek

Reputation: 59

Hover on certain text, display a picture

I've got some HTML code here

<li class="linamegroup"><a href="#top(1)">Alternator</a></li>
<li class="linamegroup"><a href="#top(2)">Krmilnik alternatorja (regler)</a></li>
<li class="linamegroup"><a href="#top(3)">Prosti tek alternatorja</a></li>

Now I would like to write a JS function that would look for the linamegroup class and its innertext values (Altenator,Krmilnik,Prosti..) So if anyone would hover the world Altenator a picture would be displayed. If you would hover krmilnik .. a different picture would be displayed.... is that possible?

Upvotes: 1

Views: 116

Answers (3)

guyaloni
guyaloni

Reputation: 5862

You can create a hidden div for each element and show it on hover.

See this solution, it might help you:
https://stackoverflow.com/a/5210074/1039488

Also see this one:
https://stackoverflow.com/a/15274658/1039488

Upvotes: 1

Persijn
Persijn

Reputation: 14990

Run the code snippet so see an css answer:

.image-container {
  padding: 5px;
  border-radius: 5px;
  border: 2px solid cornflowerblue;
  display: inline-block;
}
.image-container .headline {
  font-weight: bolder;
}
.image-container .headline ~ img {
  display: none;
}
.image-container .headline:hover ~ img {
  display: block;
}
<p>You can create this using css only
  <br/>Here is an example:</p>
<div class="image-container">
  <a class="headline">Your hover text here</a>
  <img src="http://rmfr-colorado.org/userfiles/704/images/kittens.jpg" />
</div>

How does it work?
In the css.

.image-container .headline ~ img

This selects first these classes: the .image-container, then its .headline then the ~ is a sibling selector. So its selects all the <img> tags that are next to the <a> tag.

So this: 

.image-container .headline ~ img {
  display: none;
}

hides the image so its not displayed.
And this: 

.image-container .headline:hover ~ img {
  display: block;
}

Displays the image when you hover the image.

More fancy animation:

.image-container {
  padding: 5px;
  border-radius: 5px;
  border: 2px solid cornflowerblue;
  display: inline-block;
}
.image-container .headline {
  font-weight: bolder;
  position: absolute;
}
.image-container .headline ~ img {
  position: relative;
  top: 1em;
  transition: transform 1s;
  transform: scale(0);
}
.image-container .headline:hover ~ img {
  transform: scale(1);
}
<p>You can create this using css only
  <br/>Here is an example:</p>
<div class="image-container">
  <a class="headline">Your hover text here</a>
  <img src="http://rmfr-colorado.org/userfiles/704/images/kittens.jpg" />
</div>

Upvotes: 0

Piotr Czarnecki
Piotr Czarnecki

Reputation: 1688

So in general you can get you anchor text like this:

var text;
$('.linamegroup > a').on('mouseenter', function(){
    text = $(this).text();
});

Hovewer in the scenario which you described (displaying specific image based on hovered link) the better approach would be basing on not text but also add some specific attribute to the anchor tag or some class, and do the same on img or img container something like this:

<li class="linamegroup"><a href="#top(1)" data-img='alternator'>Alternator</a></li>

<div data-img="alternator"><img alt="Alternator" src="~/images/alternator.png" /></div>

For me that approach would be better and of course I would avoid white spaces in the attribute values.

Upvotes: 0

Related Questions