How do I change a second fixed image by hovering over the first image?

Question

How do I change a second fixed image by hovering over the first image?

Asked 4 years, 10 months ago

Viewed 83 times

2

To explain better, I would like to change a second image as I move the mouse over the first.

Example:

Situation where no mouse passes over the first image.

When I hover over the first image, the second changes

With this, when I hover over a word every second image is changed.

I used this code to 1 whole image change itself, only that the representation of colors got weird, appeared more of one than other as you can see below;

<html><article><img src= "https://i.imgur.com/T7CkXGw.png"
onMouseOver= this.src="https://i.imgur.com/9EDK5EA.png"
onMouseOut= this.src="https://i.imgur.com/T7CkXGw.png"
onClick=location="https://centrorpg.com/index.php?topic=22835.msg161154;topicseen#post_elmos"><div>
<img src= "https://i.imgur.com/8LoUSqQ.png"
onMouseOver= this.src="https://i.imgur.com/nDLa00P.png"
onMouseOut= this.src="https://i.imgur.com/8LoUSqQ.png"
onClick=location="https://centrorpg.com/index.php?topic=22835.msg161154;topicseen#post_armaduras"><div>
<img src= "https://i.imgur.com/xTL0Htn.png"
onMouseOver= this.src="https://i.imgur.com/KcwPPnx.png"
onMouseOut= this.src="https://i.imgur.com/xTL0Htn.png"
onClick=location="https://centrorpg.com/index.php?topic=22835.msg161154;topicseen#post_espadas"><div><img src= "https://i.imgur.com/oYn97Sr.png"onMouseOver= this.src="https://i.imgur.com/G9PS5nU.png"
onMouseOut= this.src="https://i.imgur.com/oYn97Sr.png"
onClick=location="https://centrorpg.com/index.php?topic=22835.msg161154;topicseen#post_escudos"><div><img src= "https://i.imgur.com/nJFZqBs.png"
onMouseOver= this.src="https://i.imgur.com/fULOFTE.png"
onMouseOut= this.src="https://i.imgur.com/nJFZqBs.png"
onClick=location="https://centrorpg.com/index.php?topic=22835.msg161154;topicseen#post_acessorios"><div></article></html>

Edition: 03/09/2019 14:23

To explain better what I need:

https://i.imgur.com/1Os6QEj.png

New code, solved.

<html>
<head>
<style>
.container {
    margin: auto;
    height: 184px;
    width: 288px;
    position: relative;
}
.container img {
    display: block;
}
.container img:nth-child(n+6) {
    position: absolute;
    right: 0;
    top: 0;
}
.overx {
    z-index: 2;
}
.elmo:hover ~ .elmox {
    z-index: 2;
}
.colete:hover ~ .coletex {
    z-index: 2;
}
.espada:hover ~ .espadax {
    z-index: 2;
}
.escudo:hover ~ .escudox {
    z-index: 2;
}
.acessorio:hover ~ .acessoriox {
    z-index: 2;
}</style></head>

<div class="container">
    <img class="elmo" src="https://i.imgur.com/mBmYJzd.png" onClick=location="https://centrorpg.com/index.php?topic=22835.msg161158;topicseen#post_elmos">
    <img class="colete" src="https://i.imgur.com/cbTwy0A.png" onClick=location="https://centrorpg.com/index.php?topic=22835.msg161158;topicseen#post_armaduras">
    <img class="espada" src="https://i.imgur.com/uhn3zj2.png" onClick=location="https://centrorpg.com/index.php?topic=22835.msg161158;topicseen#post_espadas">
    <img class="escudo" src="https://i.imgur.com/KlDt4yo.png" onClick=location="https://centrorpg.com/index.php?topic=22835.msg161158;topicseen#post_escudos">
    <img class="acessorio" src="https://i.imgur.com/UfpdOnV.png" onClick=location="https://centrorpg.com/index.php?topic=22835.msg161158;topicseen#post_acessorios">

    <img class="overx" src="https://i.imgur.com/LMejPvW.png">
    <img class="elmox" src="https://i.imgur.com/LnIcqKD.png">
    <img class="coletex" src="https://i.imgur.com/n3OWgbY.png">
    <img class="espadax" src="https://i.imgur.com/BmvosVk.png">
    <img class="escudox" src="https://i.imgur.com/87CjNwg.png">
    <img class="acessoriox" src="https://i.imgur.com/fngGeHd.png">
</div></html>

How so, appeared more of one than of another? I did not understand very well

– JassRiver

2019/09/03 at 04:39
Dude but your code already seems to work... what you want is to take this blank space between one image and another?

– hugocsl

2019/09/03 at 11:04

2 answers

2

Expensive as it seems something very simple and that will not be changing here has an example only with CSS, vc will have 3 images to the left, and 3 large images to the right, and the images to the right are with position:absolute, on each other. With that when you do the :hover in the corresponding image on the left you change the z-indez of the image on the right leaving the view. To make this dynamic you will need the selector ~.

To better understand see the code below

.container {
    height: 300px;
    width: 200px;
    border: 1px solid #000;
    position: relative;
}
.container img {
    display: block;
}
.container img:nth-child(n+4) {
    position: absolute;
    right: 0;
    top: 0;
}
.elmox {
    z-index: 2;
}
.elmo:hover ~ .elmox {
    z-index: 2;
}
.colete:hover ~ .coletex {
    z-index: 2;
}
.espada:hover ~ .espadax {
    z-index: 2;
}

<div class="container">
    <img class="elmo" src="https://unsplash.it/100/100">
    <img class="colete" src="https://unsplash.it/100/100/?city">
    <img class="espada" src="https://unsplash.it/100/100/?animals">

    <img class="elmox" src="https://unsplash.it/100/300/?car">
    <img class="coletex" src="https://unsplash.it/100/300/?nature">
    <img class="espadax" src="https://unsplash.it/100/300/?people">
</div>

2

Thanks to Ana who tried to help and to Hugocsl who solved using CSS, I need to study more this CSS. The code is now working perfectly, I would like to implement the change in the main post, for those who need it. Thanks again to both of you. :)

– Victor Sena

2019/09/03 at 23:46
@Victorsena was worth young, good that helped. CSS solves a lot of things without needing to appeal to JS rss... Study yes this code will help you in other situations. Abs

– hugocsl

2019/09/04 at 00:07

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Ana Teixeira • **107** points · Answer 1 · 2019-09-03T09:45:39+00:00

I’m not sure I quite understand the question :/ You want to have two separate images and the mouseover in an image change the second image?

If so you have to in events instead of using this. use a way to select the image you want to change, for example by document.getElementById(id_imagem_a_alterar).

example, by duplicating the image you gave: (pass the mouse in the first you will change the second, depending on the id assigned to the pieces of the image)

<html>
<img src= "https://i.imgur.com/T7CkXGw.png"
onMouseOver= document.getElementById('i1').src="https://i.imgur.com/9EDK5EA.png"
onMouseOut= document.getElementById('i1').src="https://i.imgur.com/T7CkXGw.png"
onClick=location="https://centrorpg.com/index.php?topic=22835.msg161154;topicseen#post_elmos">
<div>
<img src= "https://i.imgur.com/8LoUSqQ.png"
onMouseOver= document.getElementById('i2').src="https://i.imgur.com/nDLa00P.png"
onMouseOut= document.getElementById('i2').src="https://i.imgur.com/8LoUSqQ.png"
onClick=location="https://centrorpg.com/index.php?topic=22835.msg161154;topicseen#post_armaduras">
<div>
<img src= "https://i.imgur.com/xTL0Htn.png"
onMouseOver= document.getElementById('i3').src="https://i.imgur.com/KcwPPnx.png"
onMouseOut= document.getElementById('i3').src="https://i.imgur.com/xTL0Htn.png"
onClick=location="https://centrorpg.com/index.php?topic=22835.msg161154;topicseen#post_espadas">
<div>
<img src= "https://i.imgur.com/oYn97Sr.png"
onMouseOver= document.getElementById('i4').src="https://i.imgur.com/G9PS5nU.png"
onMouseOut= document.getElementById('i4').src="https://i.imgur.com/oYn97Sr.png"
onClick=location="https://centrorpg.com/index.php?topic=22835.msg161154;topicseen#post_escudos">
<div>
<img src= "https://i.imgur.com/nJFZqBs.png"
onMouseOver= document.getElementById('i5').src="https://i.imgur.com/fULOFTE.png"
onMouseOut= document.getElementById('i5').src="https://i.imgur.com/nJFZqBs.png"
onClick=location="https://centrorpg.com/index.php?topic=22835.msg161154;topicseen#post_acessorios">
<div>


<img id='i1' src= "https://i.imgur.com/T7CkXGw.png">
<div>
<img id='i2' src= "https://i.imgur.com/8LoUSqQ.png">
<div>
<img id='i3' src= "https://i.imgur.com/xTL0Htn.png">
<div>
<img id='i4' src= "https://i.imgur.com/oYn97Sr.png">
<div>
<img id='i5' src= "https://i.imgur.com/nJFZqBs.png">
<div>
</article>

</html>