How to change the opacity of a part of the image?

Asked

Viewed 1,109 times

1

I’m mapping an image so that when I click on a certain area, another page will be referenced in an iframe. However, so that the user can know where he is clicking, I want to increase the opacity of that area and put a text. 

<img src="..." usemap="#mapa"/>
<map name="mapa">
    <span id="tutorias">
        <area shape="rect" coords="" href="teste1.html" target="janela">
        <p>Tutorias</p>
    </span>
    <area shape="rect" coords="" href="teste2.html" target="janela">
</map>

Well, my idea was to show a text on top of the coordinates passed. So that only covered that particular area.

inserir a descrição da imagem aqui

Summarizing what I plan, is to show the name of the area that the user put the mouse and demarcate it.

javascript css
  • 1

    Put the code you already have so we can see the situation.

  • He put Raphael, just like example running and running.

2 answers

2


Maybe this code without the use of javascript can help you. To map the image you can use any image editor to get the coordinates. This code uses only HTML and CSS.I didn’t put the opacity effect. Just one tooltip.I’ve just peed the first two colors of the image(black, green) I hope I’ve helped!

a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:-30px; margin-left:28px;
    width:300px; line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute; color:#111;/*cor da fonte*/
    border:1px solid #DCA; background:#fffAF0;}/*fundo  do tooltip quando o mouse passa por cima*/
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
    
/*Borda sombreada do tooltip*/
a.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
}
<img src="https://lh3.googleusercontent.com/n5CHkgjdJBSy1_HAv7jqa9fly-ouHgnEVsHBs4mRf0ibAwQZKyRuPDsot_Tj3ghuZlqs=s170" height="66" width="256"
             usemap="#meumapa"/>
	<map name="meumapa">
<a href="#" class="tooltip" >
		<area shape="rect" coords="3,4,62,61" href="#"  /><span>
        <strong>Cor negra</strong><br/>
        Assim você pode mapear sua imagem e colocar
		o testo que desejar.
    </span></a> 
<a href="#" class="tooltip">	
		<area shape="rect" coords="65,3,124,62" href="#" /><span><strong>Cor Verde</strong><br/>
        Realmente muito fácil e sem o uso de javascript.
    </span></a>

	</map>

  • 1

    That’s almost what I imagined @Penapintada, but if it gets cool here I will accept this solution.

  • This answer was good for me, @Penapintada, thank you very much! You might be bothered to comment on the lines of this CSS code and email me so I can understand how it works and then adapt?

  • 1

    Now that I noticed you have a little problem. Messages always appear below each other and not in the same place.

  • @Marceloaugusto You did exactly as in the example?

  • Yes, I made the same codes

  • 1

    I know yes, @Penapintada. I’m separating by rooms.For example, in the image I put, I will have 7 areas.

Show 1 more comment

1

To do what belongs can use javascript then I suggest the following examples

javascript writing

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First JavaScript</h1>

    <button type="button"
    onclick="document.getElementById('demo').innerHTML = Date()">
    Click me to display Date and Time.</button>

    <p id="demo"></p>

    </body>
    </html>

changing the opacity in javascript

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
    position: absolute;
    width: 300px;
    height: 150px;
    background-color: lightblue;
    border: 1px solid black;
}

#DIV2 {
    position: relative;
    top: 130px;
    left: 30px;
    width: 300px;
    height: 150px;
    background-color: coral;
    border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the "Try it" button to see through the blue DIV element:</p>

<button onclick="myFunction()">Try it</button>

<div id="DIV2">
  <h1>Voila!</h1>
</div>

<div id="myDIV">
</div>

<script>
function myFunction() {


           document.getElementById("myDIV").style.opacity = "0.5";
   }
</script>

</body>
</html>

Browser other questions tagged javascript css

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