change on mouseover, make the main.jpg

Question

Is it possible to make the main.jpg change to specific img when hovering so that it would be like...

onmousehover #1 --> changeto.. main1.jpg
onmousehover #2 --> changeto.. main2.jpg
onmousehover #3 --> changeto.. main3.jpg

This is... what it looks like...

Let me know how I should tackle this... thanks!

Sure, you could do this easily with css if you use background images — adeneo, Nov 28 '16 at 07:23
@KevinKloet I have not tried anything, was wondering what would be the simplest solution? — Brian Su, Nov 28 '16 at 07:26
I thinking this is what you want [Css change image src on imghover](http://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover) — Dan Triva, Nov 28 '16 at 07:33

score 2 · Answer 1 · answered Nov 28 '16 at 07:39

Add main image tag as below:

<img class="main-img" src="" />

Add three link as below:

<div class="hover-img-change">
    <a data-src='imagepath here'><img src="" /></a>
    <a data-src='imagepath here'><img src="" /></a>
    <a data-src='imagepath here'><img src="" /></a>
</div>

In above code add background image path in data-src.

Add script:

<script  type='text/javascript'>
$(document).ready(function(){
    $(".hover-img-change a").hover(function() {
          var backgroundImg = $(this).attr("data-src");
          $('.main-img').attr("src",backgroundImg);
    });
});
</script>

score 1 · Accepted Answer · answered Nov 28 '16 at 07:25

you need to give your a tags classes like this

<a class="a-1 main">

so that we can access them with an aditional style tag, in this we define what happens when you hover this elements.

<style>
.main {
  background-image: url('main.png');
}
.a-1:hover {
  background-image: url('main1.png');
}
.a-2:hover {
  background-image: url('main2.png');
}
.a-3:hover {
  background-image: url('main3.png');
}
</style>

EDIT

If you have to use tags you could only do this with javascript. I recommend using css backgrounds.

score 1 · Answer 3 · answered Nov 28 '16 at 07:40

Try this

<body>
 <a href="#1" rel='img1.jpg' class="imgs">img1</a>
<a href="#1" rel='review_star.png' class="imgs">img2</a>
<a href="#1" rel='main1.jpg' class="imgs">img3</a>

<img src="" width="100px" height="100px" id="main_img"/>


<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$( "a.imgs" ).hover(

  function() {
  var img=$( this ).attr('rel');
  $('#main_img').attr('src','image/'+img);
 }
);

score 0 · Answer 4 · answered Nov 28 '16 at 07:44

You don't really need javascript to do something like that. You can change your html a little bit and then with CSS you can change the image. Take a look here.

Demo

    <html>
  <head></head>
  <body>
    <div class="row">
      <div class="large-3 medium-3 small-12 columns">
        <div class="imageContainer">
          <span><a href="#"></span>
        </div>
      </div>
      <div class="large-3 medium-3 small-12 columns">
      <div class="imageContainer">
        <span><a href="#"></a></span>
        </div>
      </div>
      <div class="large-3 medium-3 small-12 columns">
      <div class="imageContainer">
        <span><a href="#"></a></span>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

.row {
  max-width:75rem;
  width:100%;
  margin:0 auto;
}
.large-3 {
  width: 33%;
  float: left;
  padding:1px;
  position:relative;

}
span {
  height:300px;
  width:300px;
  display:block;
  position:relative;
  background:url(http://65.media.tumblr.com/91c29a3bb3002b5a6fd639982a3792a5/tumblr_inline_nlh60adG3w1svf3j7_500.jpg);
    background-repeat: no-repeat;
    background-position: center; 
  -webkit-transition: all 1s; /* Safari */
    transition: all 1s;
}
.imageContainer {
  height:300px;
  width:300px;
  overflow:hidden;
}
span:hover {
  background:url('http://my-smashing.smashingapps.netdna-cdn.com/wp-content/uploads/2009/12/Slow-Shutter-Photography/slowshutter_11.jpg');
  background-position: center; 
  -webkit-transition: all 1s; /* Safari */
    transition: all 1s;
}

All you need to do, is create a container and then give this container oder span a background image and on hover with css the image can be changed.

I _think_ OP wanted to change the src of the outer image in the background when hovering one of the smaller containers, not the small container itself. — Marcus, Nov 28 '16 at 07:49

change on mouseover, make the main.jpg

4 Answers4