I’m having trouble making an image disappear while using an onmouseover event not on it, but on a button element. I need it to appear while onmouseover and disappear while not onmouseover. Heres my code:
JavaScript
x
59
59
1
<script>
2
function sfunc1() {
3
var x = document.getElementById('imgSWTCH1');
4
if (x.style.display === 'none') {
5
x.style.display = 'block';
6
} else {
7
x.style.display = 'none';
8
}
9
}
10
function sfunc2() {
11
var x = document.getElementById('imgSWTCH2');
12
if (x.style.display === 'none') {
13
x.style.display = 'block';
14
} else {
15
x.style.display = 'none';
16
}
17
}
18
function sfunc3() {
19
var x = document.getElementById('imgSWTCH3');
20
if (x.style.display === 'none') {
21
x.style.display = 'block';
22
} else {
23
x.style.display = 'none';
24
}
25
}
26
function sfunc4() {
27
var x = document.getElementById('imgSWTCH4');
28
if (x.style.display === 'none') {
29
x.style.display = 'block';
30
} else {
31
x.style.display = 'none';
32
}
33
}
34
function sfunc5() {
35
var x = document.getElementById('imgSWTCH5');
36
if (x.style.display === 'none') {
37
x.style.display = 'block';
38
} else {
39
x.style.display = 'none';
40
}
41
}
42
function sfunc6() {
43
var x = document.getElementById('imgSWTCH6');
44
if (x.style.display === 'none') {
45
x.style.display = 'block';
46
} else {
47
x.style.display = 'none';
48
}
49
}
50
function sfunc7() {
51
var x = document.getElementById('imgSWTCH7');
52
if (x.style.display === 'none') {
53
x.style.display = 'block';
54
} else {
55
x.style.display = 'none';
56
}
57
}
58
</script>
59
This is the javascript to make it appear on mouseover, and the html is
JavaScript
1
29
29
1
<img id="imgSWTCH1"src="https://www.shareicon.net/data/128x128/2016/10/20/846459_blue_512x512.png" width="100" height="100"/>
2
<img id="imgSWTCH2"src="https://www.writeraccess.com/wp-content/uploads/2014/08/blog-html-5.png" width="100" height="100"/>
3
<img id="imgSWTCH3"src="https://www.shareicon.net/data/128x128/2016/06/25/619190_java_256x256.png" width="100" height="100"/>
4
<img id="imgSWTCH4"src="https://www.shareicon.net/data/128x128/2016/05/06/760855_css_512x512.png" width="100" height="100"/>
5
<img id="imgSWTCH5"src="http://poiemaweb.com/img/socketio-logo.png" width="100" height="100"/>
6
<img id="imgSWTCH6"src="https://www.shareicon.net/data/128x128/2016/07/08/116973_development_512x512.png" width="100" height="100"/>
7
<img id="imgSWTCH7"src="https://www.shareicon.net/data/128x128/2015/08/30/93000_javascript_512x512.png" width="100" height="100"/>
8
<center>
9
10
11
<br />
12
<br />
13
<table >
14
<tb id="tab" onmouseover="sfunc1()" onmouseout="this.className='BO';">C</tb>
15
16
<br />
17
<tb id="tab" onmouseover=" sfunc3()" onmouseout="this.className='BO';">Java</tb>
18
<tb id="tab" onmouseover=" sfunc2()" onmouseout="this.className='BO';">HTML</tb>
19
<tb id="tab" onmouseover="sfunc4()" onmouseout="this.className='BO';">CSS</tb>
20
21
<tb id="tab" onmouseover="sfunc5()" onmouseout="this.className='BO';">Socket.io/Node</tb>
22
<tb id="tab" onmouseover="sfunc6()" onmouseout="this.className='BO';">Angular.js</tb>
23
<br />
24
<tb id="tab" onmouseover="sfunc7()" onmouseout="this.className='BO';">Javascript</tb>
25
26
<tb id="tab" onmouseover=" this.className='BC';" onmouseout="this.className='BO';">and much more!</tb>
27
</table>
28
</center>
29
The onmouseout for all of these just makes the background orange but I want it to make the image corresponding to it disappear, which I’m having trouble with since you cant assign multiple ID’s to an element. A jquery solution would work too, and so would one in angular. https://plnkr.co/edit/WwpzOkipsiCrbgbpXbd4?p=preview heres the pnlkr link, stetch the html portion out to see the whole thing too.
Advertisement
Answer
Here is a simple example using JQuery:
https://jsfiddle.net/ztuf96dg/4/
JavaScript
1
13
13
1
$(document).ready(function() {
2
$('li').hover(function(e) {
3
var imageID = $(e.currentTarget).attr('data-img-id');
4
var $image = $('img[data-img-id="' + imageID + '"]');
5
$image.show();
6
},
7
function(e) {
8
var imageID = $(e.currentTarget).attr('data-img-id');
9
var $image = $('img[data-img-id="' + imageID + '"]');
10
$image.hide();
11
});
12
});
13