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

Question

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

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I'm mapping an image so that when I click on a particular area, another page is referenced in an iframe. However, in order for the user to know where he / she is clicking, I want to increase the opacity of that area and place 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 text over past coordinates. So that it only covered that particular area.

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

javascript css

asked by anonymous 06.10.2015 / 13:29

2 answers

1

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

write using javascript

    <!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 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>

06.10.2015 / 13:42

Know which button invoked the action Index identification changes before time JS

score 2 · Accepted Answer

Maybe this code without the use of javascript can help you. To do the image mapping you can use any image editor to get the coordinates. This code uses only HTML and CSS . I did not put the opacity effect. Just a tooltip . I mapped only the first two colors of the image (black, green) I hope I have 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>