Changing images on hover with css/html

Question

I have a problem with changing images by hover effect. Actually I can change image if the images are one on the top of the other but I need something different.
I need to change the images when I mouse over another image. Like;

<div id="gallery">
                    <div>
                        <img src="images/team-large.jpg" alt="Img">
                    </div>
                    <ul>
                        <li>
                            <img src="images/elek2.jpg" alt="Img" title="Elektronik Alt Sistemler">
                        </li>
                        <li>
                            <img src="images/su.jpg" alt="Img" title="Sualtı Akustik Sistemler">
                        </li>
                        <li>
                            <img src="images/yazılım.jpg" alt="Img" title="Yazılım, Bilgi Teknolojileri ve Simülasyon">
                        </li>
                    </ul>
                </div>

This is my HTML Code and I need to change

<img src="images/team-large.jpg" alt="Img">

this image when I mouse over the other sub images but I'm stuck.

Addition;

How can I change other images by onmouseover and onmouseout commands??

    <div id="gallery">
                        <div>
                            <img src="images/team-large.jpg" id="Img1" name="Img1" class="Img1" alt="Img1" />
                        </div>
                        <ul>
                            <li>
                                <img src="images/elek2.jpg" alt="Img" title="Elektronik Alt Sistemler" 
onmouseover="'#Img1'.src='images/elek3.jpg'" onmouseout="'#Img1'.src='images/team-large.jpg'">
                            </li>
                            <li>
                                <img src="images/su.jpg" alt="Img" title="Sualtı Akustik Sistemler" class="thumbnail">
                            </li>
                            <li>
                                <img src="images/yazılım.jpg" alt="Img" title="Yazılım, Bilgi Teknolojileri ve Simülasyon" class="thumbnail">
                            </li>
                        </ul>
                    </div>

I added the ID name to Img1 and tried to change the image when I mouse over 'images/elek2.jpg' but it doesn't work.

Thanks for help.

So your goal is to set this "main" image source equal to the image source the user is hovering this moment? — Giorgio
– Giorgio, Commented Jan 15, 2015 at 11:01

jbutler483 · Accepted Answer · 2015-01-15 11:00:24Z

1

You could alter the background image using css's :hover instead. Something like:

div{
  height:200px;
  width:200px;
  background:url("http://placekitten.com/g/200/200");
  }

div:hover{
    background:url("http://placekitten.com/g/200/400");
  }

<div></div>

For what you're looking for, you might need the child or sibling selector:

.parent{
  height:300px;
  width:300px;
  background: url("http://placekitten.com/g/300/300");
  }

.child{
  height:200px;
  width:200px;
  background: url("http://placekitten.com/g/200/200");
  }

.parent:hover .child{
  background: url("http://placekitten.com/g/200/300");
  }

<div class="parent">
  
  <div class="child"></div>

answered Jan 15, 2015 at 11:00

jbutler483

24.7k11 gold badges100 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Burak Over a year ago

yeah I know this way but when I make the image background, it doesn't show up. I don't know why. @jbutler483

jbutler483 Over a year ago

@Burak: Look up the css 'sibling' selector

Burak Over a year ago

I change the question, could you check the new verson please ? @jbutler483

jbutler483 Over a year ago

@Burak: see this for a step by step guide on doing that.

Giorgio · Accepted Answer · 2015-01-15 12:28:57Z

0

You may try this jQuery code to change source of main image

var original = $('#main').attr('src');

$('.thumbnail').mouseover(function()
{
   var source = $(this).attr('src'); // retrieve image source of hovered image
   $('#main').attr('src', source); // update main image source
})
.mouseout(function() {
   $('#main').attr('src', original); // restore original image source
});

jsFiddle code (UPDATED)

In the linked snippet, I've assigned a main id to main image and a thumbnail class to other images. This allows to access them runtime via jQuery.

edited Jan 15, 2015 at 12:28

answered Jan 15, 2015 at 11:08

Giorgio

1,9706 gold badges41 silver badges70 bronze badges

2 Comments

Burak Over a year ago

I change the question, could you check the new verson please ? @Giorgio

Giorgio Over a year ago

I've updated my answer and added mouseout handler. But I'm not sure about to have correctly interpreted your question update. This snippet sets main image to thumbnail on mouse over and set it back to original source on mouse out. Let me know if it is correct.

Collectives™ on Stack Overflow

Changing images on hover with css/html

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related