Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

137
Visualizações
area onmouseover cursor appearance

I've got a map with area tags set up, for which I'd like to have a onmouseover event, changing the cursor's appearance to tell the user its clickable. But, there is a problem using safari:

Using onmouseover="style.cursor = 'pointer';" doesen't seem to work in the area tag. Not generally, as it totally triggers other things when hovering. Also safari lets me change its appearance using other ways, but with this combination it just doesen't...

<div class="desktop"> <img src="docs/docs_overview_desktop.jpg" usemap="#desktop"> <map name="desktop"> <area shape="rect" coords="2057.143,0,2742.857,960" onmouseover="style.cursor = 'pointer';" onclick="document.getElementById('lightboxSrc').src='docs/docs_000.jpg'; lightboxOpen();"> </map> </div>
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Safari isn't always supporting the "general" functions that other browsers do these days. But still, I can hardly believe that they wouldn't support an onmouseover event, so it's probably the rest of the code that's causing the problem for it not to work.


If really want to use javascript to apply the styling for a pointer then try to make it more specific like this: onmouseover="this.style.cursor='pointer';"


But why use JavaScript when you want to add a styling? CSS alone would be enough just place this in your stylesheet and you can remove the whole inline onmouseover:

.desktop area:hover{
   cursor: pointer;
}

Or use an empty href="#"so the browsers sees it's a link and it shows the pointer by default.

Here's an example. Make sure your coordinates are in the image aswell of course!

img {
  width: 100px;
  height: 100px;
  border: solid 1px black;
}
<div class="desktop"> 
  <img src="docs/docs_overview_desktop.jpg" usemap="#desktop"> 
  <map name="desktop"> 
    <!-- Coords are from left uper corner (10px on the x and y axis) to the right bottom corner (90px on the x and y axis) -->
    <area shape="rect" coords="10,10,90,90" onclick="document.getElementById('lightboxSrc').src='docs/docs_000.jpg'; lightboxOpen();" href="#"> 
  </map> 
</div>

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda