Imagem Com Setinhas Que Ao Clicar Muda

AlexCT · Outubro 22, 2004

estou procurando um script que aparece uma foto e umas setas do lado(esq/dir ou cima/embaixo)

Ao clicar ou passar o mouse na seta, aparece outra foto e por ai em diante

mas sem que a pagina de refresh

Eughenio · Outubro 22, 2004

Pode ser com Swap image, tem como fazer facinho pelo Dream Weaver, se você não tiver, escreve aqui q eu posto o código.

Pra fazer pelo Dream Weaver é so:

Colocar a imagem, selecionar ela, e apertar em Behaviors e escolher Swap Images, escolha a foto q você quer substitua a atual e dê oK.

Só rodar a página e partir pro abraço.

Falow.

AlexCT · Outubro 22, 2004

eu uso o dreamweaver mas sou meio leigo....

aonde fica o Behaviors?

Eughenio · Outubro 22, 2004

Qual DreamWeaver você usa???

AlexCT · Outubro 22, 2004

DW MX em portugues

renan_doidera · Outubro 23, 2004

Olha um cara postou esse script de slide show láh, parece ser o que você está querendo...

<html>

<head>

<title>PushButton SlideShow</title>

<!-- 
Set up the caption font in the following style.
Also set the styles for the controls.
Place the style script in the head of the page.
//-->

<style>
.Caption {
font-family: Arial;
font-weight: normal;
font-size:  12pt;
color:      #FF3300; }

A.Controls:link    { color:#666666;
                    text-decoration:none;
                    font-family: Arial;
                    font-size:   14pt;
                    font-weight: bold; }
A.Controls:visited { color:#666666; text-decoration:none; 
                    font-family: Arial;
                    font-size:   14pt;
                    font-weight: bold; }
A.Controls:active  { color:#666666; text-decoration:none;
                    font-family: Arial;
                    font-size:   14pt;
                    font-weight: bold; }
A.Controls:hover   { color:#00FF00; text-decoration:none;
                    font-family: Arial;
                    font-size:   14pt;
                    font-weight: bold; }

</style>

<!-- 
Place the following script in the head of the page.
Follow the set-up instructions within the script.
//-->

<script>

// (C) 2003 by CodeLifter.com
// Free for all users, but leave in this header.

// ==============================
// Set the following variables...
// ==============================

// Set the slideshow speed (in milliseconds)
var SlideShowSpeed = 3000;

// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 2;

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
var showHot = false;       // don't change this

// Specify the image files...
// To add more images, just continue
// the pattern, adding to the array below.
// To use fewer images, remove lines
// starting at the end of the Picture array.
// Caution: The number of Pictures *must*
// equal the number of Captions!

Picture[1]  = 'Nebula01.jpg';
Picture[2]  = 'Nebula02.jpg';
Picture[3]  = 'Nebula03.jpg';
Picture[4]  = 'Nebula04.jpg';
Picture[5]  = 'Nebula05.jpg';
Picture[6]  = 'Nebula06.jpg';
Picture[7]  = 'Nebula07.jpg';
Picture[8]  = 'Nebula08.jpg';
Picture[9]  = 'Nebula09.jpg';
Picture[10] = 'Nebula10.jpg';

// Specify the Captions...
// To add more captions, just continue
// the pattern, adding to the array below.
// To use fewer captions, remove lines
// starting at the end of the Caption array.
// Caution: The number of Captions *must*
// equal the number of Pictures!

Caption[1]  = "This is the first caption.";
Caption[2]  = "This is the second caption.";
Caption[3]  = "This is the third caption.";
Caption[4]  = "This is the fourth caption.";
Caption[5]  = "This is the fifth caption.";
Caption[6]  = "This is the sixth caption.";
Caption[7]  = "This is the seventh caption.";
Caption[8]  = "This is the eighth caption.";
Caption[9]  = "This is the ninth caption.";
Caption[10] = "This is the tenth caption.";

// =====================================
// Do not edit anything below this line!
// =====================================

var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();
}

document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}


function control(how){
if (showHot){
if (how=="H") jss = 1;
if (how=="F") jss = jss + 1;
if (how=="B") jss = jss - 1;
if (how=="I") runSlideShow();

if (jss > (pss)) jss=1;
if (jss < 1) jss = pss;
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
}}

</script>

</head>

<!--
Add onload='showHot=true;' to the body tag.  This is
needed to prevent false object calls while the page
is loading. Optional: If you are using this in a
popup, as in this demo, adding self.focus() to the
onload event in the body tag will bring the popup
to the front each time it is loaded [recommended]. 
//-->

<body onload='showHot=true;self.focus();' bgcolor=#000000 link="#FF0000" vlink="#FF0000" alink="#FF0000">

<!--
The following table holds the images, captions, and controls.
Place the table in your page where you want the slideshow
to appear.  Follow the instructions for each table cell.
//-->

<div align="center">
 <center>

<table border=0 cellpadding=10 cellspacing=0>
 <tr>
   <!--
   The next table cell holds the images.
   Set cell and image width and height the same.
   The img src must have name=PictureBox in its
   tag.  Often, the first image in the Picture
   array in the script is used here; but you
   may also use a different, introductory image
   as we have here, since this image is shown
   only on start-up.
   //-->
   <td width=350 height=280 colspan="3">
   <img src=Nebula00.gif name=PictureBox width=350 height=280>
   </td>
 </tr>
 <tr>
   <!-- 
   The next table cell holds the captions.
   This table cell must have id=CaptionBox and
   class=Caption in its tag. The default caption
   shows whilst loading in all browsers; NS4
   will show only the default caption, throughout.
   //-->
   <td id=CaptionBox class=Caption align=center colspan="3">
   This is the default caption.
   </td>
 </tr>
   <!--
   The following three cells contain the controls.
   Each of the control a href's must contain class=
   Controls, to attach the styles (see top of script).
   To dress this up a bit, you can of course substitute
   <img src> images for the text in the links.
   //-->
 <tr>
   <td align="center">
   <a class=Controls href="#" onClick="javascript:control('B');">< <</a>
   </td>
   <td align="center">
   <a class=Controls href="#" onClick="javascript:control('I');">| | |</a>
   </td>
   <td align="center">
   <a class=Controls href="#" onClick="javascript:control('F');"><b>> ></b></a>
   </td>
<td align="center">
   <a class=Controls href="#" onClick="javascript:clearTimeout(tss)"><b>Parar</b></a>
   </td>

   <td align="center">
   </td>
 </tr>  
</table>

 </center>
</div>

</body>

</html>

Entrar

Imagem Com Setinhas Que Ao Clicar Muda

Pergunta

AlexCT

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

Eughenio

Link para o comentário

Compartilhar em outros sites

AlexCT

Link para o comentário

Compartilhar em outros sites

Eughenio

Link para o comentário

Compartilhar em outros sites

AlexCT

Link para o comentário

Compartilhar em outros sites

renan_doidera

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades