Skip to main content
Inspiring
April 1, 2019
Answered

Click on image B without affect image A

  • April 1, 2019
  • 1 reply
  • 475 views

I have one image (pink "B") included and over another (blue "A") like the follow exemple.

I need to click (onClick) over B and play a sound without play another  sound conect to the image A.  

At my level if I clik on B Is the sound of A ("playThis") that play.

Is there a way to click on B and do not "play" A?

The Image A

<style>   

#Image1{

top: x1px;   

left: x2px;

width: x3px;

height: x4px;

position: absolute;

background-image: y

}

</style>

   

The Image B is set in similar way.

<div onClick ="PlayThis()" id = "ImageA'"></div>

<div onClick ="PlayThat()" id = "ImageB'"></div>

This topic has been closed for replies.
Correct answer osgood_

One way would be to move your onClick events to a <span> tag:

<div  id="Image1">

<span onClick="playThis()"></span>

<div id="Image2">

<span onClick="playThat()"></span>

</div>

<!-- end Image2 -->

</div>

<!-- end Image1 -->

Then style the span tags so they cover their parent container area:

#Image1 span, #Image2 span {

display: block;

height: 100%;

}

1 reply

osgood_Correct answer
Legend
April 1, 2019

One way would be to move your onClick events to a <span> tag:

<div  id="Image1">

<span onClick="playThis()"></span>

<div id="Image2">

<span onClick="playThat()"></span>

</div>

<!-- end Image2 -->

</div>

<!-- end Image1 -->

Then style the span tags so they cover their parent container area:

#Image1 span, #Image2 span {

display: block;

height: 100%;

}

Inspiring
April 2, 2019

Thank you very much Osgood!!