Jump to content
Fórum Script Brasil
  • 0

Javascript Mudar Imagem


Jony Walker
 Share

Question

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

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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);
}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      151k
    • Total Posts
      649.1k
×
×
  • Create New...