2 replies to this topic

[Rhea]

Olá, estava tentando colocar alguns maps usando o onmouseover e out. Tenho uma unica imagem e dependendo de onde eu coloco o mouse a ímagem deve mudar. Sei que pelo <area> só os atributos onfocus e onblur executam JS. Então tentei outra forma mas estou tendo problemas com o seguinte código:

<!-- Aqui o preload -->
<script language="javascript">

Image1 = new Image(265,406)
Image1.src = "images/default.jpg"

Image2 = new Image(265,406)
Image2.src = "images/im2.gif"

Image3 = new Image(265,406)
Image3.src = "images/im3.gif"

</script>

<!-- Aqui a img qe qero -->
<img SRC="default.jpg" USEMAP="#lee">

<!-- Aqui as funções -->
<script language="javascript">

function imglinkdois() {
document.emp.src = Image3.src; return true;
}

function imglinkum() {
document.emp.src = Image2.src; return true;
}

function default() {
document.emp.src = Image1.src; return true;
}

</script>

<map name="lee">

<area shape="rect" COORDS="117,70,160,119" href="" onMouseOver="imglinkum()" onMouseOut="default()">

<area shape="rect" COORDS="117,70,160,119" href="" onMouseOver="imglinkdois()" onMouseOut="default()">

</map>

Alguém sabe a solução?

Obg desd já;

[Satoru]

primeiramente atribua um id a imagem(vou usar de exemplo o id imagem1):

<img SRC="default.jpg" USEMAP="#lee" id="imagem1">

Depois nos scripts, utilize o id da imagem, no caso, imagem1, para alterar seu src:

<script language="javascript">

function imglinkdois() {
//altera a imagem cujo id é imagem1
document.getElementById('imagem1').src = Image3.src;
}

function imglinkum() {
//altera a imagem cujo id é imagem1
document.getElementById('imagem1').src = Image2.src;
}

function default() {
//altera a imagem cujo id é imagem1
document.getElementById('imagem1').src = Image1.src;
}

</script>

Percebi outra coisa, existem duas tags AREA com as mesmas coordenadas na tag MAP.

[Rhea]

primeiramente atribua um id a imagem(vou usar de exemplo o id imagem1):

<img SRC="default.jpg" USEMAP="#lee" id="imagem1">

Depois nos scripts, utilize o id da imagem, no caso, imagem1, para alterar seu src:

<script language="javascript">

function imglinkdois() {
//altera a imagem cujo id é imagem1
document.getElementById('imagem1').src = Image3.src;
}

function imglinkum() {
//altera a imagem cujo id é imagem1
document.getElementById('imagem1').src = Image2.src;
}

function default() {
//altera a imagem cujo id é imagem1
document.getElementById('imagem1').src = Image1.src;
}

</script>

Percebi outra coisa, existem duas tags AREA com as mesmas coordenadas na tag MAP.

Obrd man! Bem, utilizei outra imagem com seu code e funcionou realmente. Mas... ela não volta pro estado default e meu map para de funcionar no primeiro onmouseover, como se não houvesse nada:

<!--preload-->
<script language="javascript">

Image1 = new Image(800,600)
Image1.src = "images/mee.jpg"

Image2 = new Image(800,600)
Image2.src = "images/mee1.jpg"

Image3 = new Image(800,600)
Image3.src = "images/mee1.jpg"

Image4 = new Image(800,600)
Image4.src = "images/mee1.jpg"

Image5 = new Image(800,600)
Image5.src = "images/mee1.jpg"

Image6 = new Image(800,600)
Image6.src = "images/mee1.jpg"

Image7 = new Image(800,600)
Image7.src = "images/mee1.jpg"

</script>


<!--minha imagem-->
<div align="center"><img src="imagens/mee.jpg" align="middle" usemap="#mee" id="imagem1"></div>

<!--meu map-->
<!--

COLOQUEI AO INVEZ DE DEFAULT() A IMAGEM DIRETA, MAS DEU NA MESMA

-->
<map name="mee">
<area shape="rect" coords="599,493,677,518" href="" onmouseover="imglinkum()" onmouseout="default()">
<area shape="rect" coords="603,418,667,446" href="" onmouseover="imglinkdois()" onmouseout="default()">
<area shape="rect" coords="603,211,667,238" href="" onMouseOver="imglinktres()" onmouseout="default()">
<area shape="rect" coords="233,463,297,487" href="" onMouseOver="imglinkquatro()" onmouseout="default()">
<area shape="rect" coords="180,351,312,376" href="" onMouseOver="imglinkcinco()" onmouseout="default()">
<area shape="rect" coords="196,140,252,166" href="" onMouseOver="imglinkseis()" onmouseout="default()">
</map>

<!--minhas functions-->
<script language="javascript">

function imglinkum() {
//altera a imagem cujo id é imagem1
document.getElementById('imagem1').src = Image2.src;
}

function imglinkdois() {
//altera a imagem cujo id é imagem1
document.getElementById('imagem1').src = Image3.src;
}

function imglinktres() {
//altera a imagem cujo id é imagem1
document.getElementById('imagem1').src = Image4.src;
}

function imglinkquatro() {
//altera a imagem cujo id é imagem1
document.getElementById('imagem1').src = Image5.src;
}

function imglinkcinco() {
//altera a imagem cujo id é imagem1
document.getElementById('imagem1').src = Image6.src;
}

function imglinkseis() {
//altera a imagem cujo id é imagem1
document.getElementById('imagem1').src = Image7.src;
}

function default() {
//altera a imagem cujo id é imagem1
document.getElementById('imagem1').src = Image1.src;
}

</script>

Alguma solução? D:

HAHA, mudei os nomes das funções e funcionou. Obgr ae man. Fui idiota e usei default. Erro meu.

Edição feita por: Rhea, 12/11/2011, 16:12.