Tenho pouco conhecimento, mas estou tentando montar um site e estou tendo algumas dificuldades com os efeitos desejados.
Montei a cara do site no fireworks e fiz todos os slice. exportado para o dreamweaver, no local de uma imagem estou tentando adicionar um script de efeito.
O efeito entraria na imagem que está na célula da linha central.
Inicialmente eu gostaria de colocar o seguinte script:
"
<head>
<title></title>
<style type="text/css">
<!--
body {
background: white;
}
a#foto {
float:left;
text-indent: -1000em;
overflow: hidden;
display: block;
border: 1px solid #000;
width: 200px;
height: 150px;
background: url("100H01.jpg") no-repeat;
}
a#foto:hover {
width: 800px;
height: 600px;
background-position: 0 0px;
}
-->
</style>
</head>
<body>
<a href="#" id="foto">Ver a foto ampliada</a>
</body>
"
A imagem é ampliada no mouseover. Apesar de que há um pequeno problema nesse script, a imagem pequena não é uma miniatura da original, apenas um pedaço dela que aparece em uma "janela".
Ou eu poderia usar alternativamente o seguinte script:
Pergunta
Mestre Slim
Olá!
Tenho pouco conhecimento, mas estou tentando montar um site e estou tendo algumas dificuldades com os efeitos desejados.
Montei a cara do site no fireworks e fiz todos os slice. exportado para o dreamweaver, no local de uma imagem estou tentando adicionar um script de efeito.
O local da imagem está originalmente assim:
"...
<td rowspan="13"><img name="Home_r5_c10" src="Home_r5_c10.jpg" width="11" height="213" border="0" id="Home_r5_c10" alt="" /></td>
<td rowspan="7" colspan="3"><img name="Home_r5_c11" src="Home_r5_c11.jpg" width="203" height="135" border="0" id="Home_r5_c11" alt="" /></td>
<td rowspan="14"><img name="Home_r5_c14" src="Home_r5_c14.jpg" width="10" height="291" border="0" id="Home_r5_c14" alt="" /></td>
..."
O efeito entraria na imagem que está na célula da linha central.
Inicialmente eu gostaria de colocar o seguinte script:
"
<head>
<title></title>
<style type="text/css">
<!--
body {
background: white;
}
a#foto {
float:left;
text-indent: -1000em;
overflow: hidden;
display: block;
border: 1px solid #000;
width: 200px;
height: 150px;
background: url("100H01.jpg") no-repeat;
}
a#foto:hover {
width: 800px;
height: 600px;
background-position: 0 0px;
}
-->
</style>
</head>
<body>
<a href="#" id="foto">Ver a foto ampliada</a>
</body>
"
A imagem é ampliada no mouseover. Apesar de que há um pequeno problema nesse script, a imagem pequena não é uma miniatura da original, apenas um pedaço dela que aparece em uma "janela".
Ou eu poderia usar alternativamente o seguinte script:
"
<script>
h=0
function slideshow()
{
switch (h)
{
case 0:foto.src="1.jpg";
break;
case 1:foto.src="2.jpg";
break;
case 2:foto.src="3.jpg";
break;
case 3:foto.src="4.jpg";
break;
case 4:foto.src="5.jpg";
h=-1;
}
h++;
}
</script>
</head>
<body background="Background.jpg" onLoad="setInterval('slideshow()',1000)";>
<p align="center"><img src="1.jpg" name="foto"> </p>
</body>
"
Pequeno slideshow em imagem na página inicial.
Seria possível eu criar scripts para mais de um slideshow em uma mesma página?
Tipo, 3 imagens na tela e cada uma mostrando uma sequencia distinta de imagens...
Eu poderia fazer, sei lá, um script para cada
slideshow (1)
slideshow (2)
slideshow (3)
...
Como encaixo isso na minha página?????
Valeu!
PS. - Sim, achei esses scripts aqui! Obrigado!
Editado por Mestre SlimLink para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.