Javascript Mudar Imagem

Jony Walker · December 21, 2006

O esquema que estou tentando montar é assim: a img tem um rollOver, mas quando clicar nela e carregar o link dentro do iframe, ficar a img do rollOver, pra não ter que reescrever o nome do link dentro do iframe.

Alguém tem uma sugestão ? vou tentar montar algo e posto aqui pra ver se estou no caminho certo

babaloricha · December 21, 2006

ei jonny

fiz um com div

com rollover, no rollover as imagens são pequenas 80 ,80 quando clica elas ficam 640 480

se quise da uma olhada hj a tarde entra em www.truffiblindados.com.br e clique em consulte!

ou se prefirir eu coloco o codigo

Jony Walker · December 21, 2006

Então cliquei nas imgs e num rolou... posta o cód. por favor...

babaloricha · December 21, 2006

opa que e que eu ainda não atualizei :P

ma olha o codigo aqui ele está um pouco alterado pra ficar na vertical ! mas olha ele ai

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#mask{
    position:absolute;
    width:113px;
    height:427px;
    z-index:1;
    left: 650px;
    top: 68px;
    overflow:hidden;
    background-color:#d6fccd;
}
#menu{
    position:absolute;
    width:103px;
    height:603px;
    z-index:2;
    left: 3px;
    top: -24px;
    overflow:visible;
}
#setas {
    position:absolute;
    width:112px;
    height:44px;
    z-index:2;
    left: 653px;
    top: 16px;
    background:d6fccd;
}
-->
</style>
</head>
<script language="JavaScript">
var velo_scroll = 20; // velocidade da rolagem
var pixel_scroll = 10; // quantidade de saltos entre os pixels
var window_width = 400; 
var isNav;
var isIE;
var coll = "";
var styleObj = "";
if (parseInt(navigator.appVersion) >= 4) {
if (navigator.appName == "Netscape") {
isNav = true;
} else {
isIE = true;
coll = "all.";
styleObj = ".style";
}
}

function getObjWidth(obj) {
var theObj = eval("document." + coll + obj);
if (isNav) {
return theObj.clip.width;
} else {
return theObj.clientWidth;
}
}

function getObject(obj) {
if (typeof obj == "string") {
theObj = eval("document." + coll + obj + styleObj);
} else {
theObj = obj;
}
return theObj;
}

function getInsideWindowWidth() {
if (isNav) {
return window.innerWidth;
} else {
return document.body.clientWidth;
}
}

function getObjectLeft(obj) {
var theObj = getObject(obj);
if (isNav) {
return theObj.left;
} else {
return theObj.pixelLeft;
}
}

function shiftBy(obj, x, y) {
var theObj = getObject(obj);
if (isNav) {
theObj.left = theObj.left + x;
theObj.top = theObj.top + y;
} else {
theObj.pixelLeft = theObj.pixelLeft + x;
theObj.pixelTop = theObj.pixelTop + y;
}
}

var tim = 0;
var noScroll = true;

function mLeft(obj) {
obj = "menu"
if(!noScroll && getObjectLeft(obj) < window_width) {
shiftBy(obj,0,pixel_scroll);
tim = setTimeout("mLeft()", velo_scroll);
}
}

function mRight(obj) {
obj = "menu";
//if(!noScroll && getObjectLeft(obj) > -(getObjWidth(obj) - (getInsideWindowWidth())) - window_width) {
shiftBy(obj,0,-pixel_scroll);
tim = setTimeout("mRight()", velo_scroll);
}
//}

function noMove() {
clearTimeout(tim);
noScroll = true;
}
f1 = new Image(432,364);
f1.src = "f1.JPG";
f2= new Image(432,364)
f2.src = "f2.JPG";
f3= new Image(432,364)
f3.src = "f3.JPG";
f4= new Image(432,364)
f4.src = "f4.JPG";
f5= new Image(432,364)
f5.src = "f5.JPG";
f6= new Image(432,364)
f6.src = "f6.JPG";
</script>


<body bgcolor="d6fccd">
<div id="setas">
<a href="#" onmouseover="noScroll=false; mLeft('menu')" onmouseout="noMove()"><img src="cima.JPG" width="50" height="44" /></a>
<a href="#" onMouseOver="noScroll=false; mRight('menu')" onMouseOut="noMove()"><img src="baixo.JPG" width="50" height="45" /></a></div>
<!--<p><a href="#" onmouseover="noScroll=false; mLeft('menu')" onmouseout="noMove()">Esquerda</a>
    <a href="#" onMouseOver="noScroll=false; mRight('menu')" onMouseOut="noMove()">Direita</a></p>-->
<div id="mask">
  <div id="menu"> <img src="f1.JPG" height="100" width="100" onclick="window.document['foto'].src = f1.src"/><img src="f2.JPG" height="100" width="100" onclick="window.document['foto'].src = f2.src" /></div>
</div>
<p><img src="f1.JPG" width="640" height="480" name="foto"/></p>
</body>
</html>

pra ficar vertical eu alterei

function mLeft(obj) {
obj = "menu"
if(!noScroll && getObjectLeft(obj) < window_width) {
shiftBy(obj,0,pixel_scroll);
tim = setTimeout("mLeft()", velo_scroll);
}
}

function mRight(obj) {
obj = "menu";
//if(!noScroll && getObjectLeft(obj) > -(getObjWidth(obj) - (getInsideWindowWidth())) - window_width) {
shiftBy(obj,0,-pixel_scroll);
tim = setTimeout("mRight()", velo_scroll);
}

o original(horizontal)

function mLeft(obj) {
obj = "menu"
if(!noScroll && getObjectLeft(obj) < window_width) {
shiftBy(obj,pixel_scroll,0);
tim = setTimeout("mLeft()", velo_scroll);
}
}

function mRight(obj) {
obj = "menu";
if(!noScroll && getObjectLeft(obj) > -(getObjWidth(obj) - (getInsideWindowWidth())) - window_width) {
shiftBy(obj,-pixel_scroll,0);
tim = setTimeout("mRight()", velo_scroll);
}

December 21, 2006

Vou testar e t retorno até amanhã

Sign In

Javascript Mudar Imagem

Question

Jony Walker

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

babaloricha

Link to comment

Share on other sites

Jony Walker

Link to comment

Share on other sites

babaloricha

Link to comment

Share on other sites

Guest Visitante

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity