Buongiorno a tutti.
Ho creato la seguente pagina di prova:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<meta name="description" content="Studio Immobiliare">
<meta name="keywords" content="keywords">
<meta name="author" content="Walter Ambra">
<link rel="stylesheet" type="text/css"
href="style.css" media="screen">
<title>Studio Immobiliare di Ambra Walter</title>
<script language="JavaScript">
var rotate_delay = 2000;
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
}
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
}
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
}
}
// End -->
</script>
</head>
<body>
<div class="container">
<div class="main">
<div class="content"><span style="font-weight: bold;"></span>
<form name="slideform">
<table bgcolor="#0000ff" cellpadding="4"
cellspacing="1">
<tbody>
<tr style="color: rgb(255, 255, 255);">
<td style="background-color: rgb(0, 0, 255);"
align="center" bgcolor="white"> Galleria
fotografica della soluzione proposta </td>
</tr>
<tr>
<td align="center" bgcolor="white" height="150"
width="200"></td>
</tr>
<tr>
<td align="center" bgcolor="#0000ff">
<select name="slide" onchange="change();">
<option
value="http://netcafe7.com/wp-content/uploads/2012/06/google.gif"
selected="selected">Logo di Google </option>
<option
value="http://www.essenzialeonline.it/wp-content/uploads/2012/07/yahoo_logo1.jpg">Logo
di Yahoo </option>
<option
value="http://www.nationalpositions.com/blog/wp-content/uploads/2012/05/bing1.jpg">Logo
di Bing </option>
</select>
</td>
</tr>
<tr>
<td align="center" bgcolor="#0000ff"> <input
onclick="first();" value="|<<" title="Beginning"
type="button"><input onclick="previous();"
value="<<" title="Previous" type="button"><input
name="slidebutton" onclick="ap(this.value);"
value="Start" title="AutoPlay" type="button"><input
onclick="next();" value=">>" title="Next"
type="button"><input onclick="last();" value=">>|"
title="End" type="button"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
La domanda è la seguente: come potrete notare, man mano che scorro le foto la cornice si ingrandisce e rimpicciolisce in funzione delle dimensioni delle foto. Io invece vorrei che le foto si adattassero proporzionalmente alle dimensioni di un riquadro standard di 530x375 pixel.
Come posso modificare dunque il mio script?
Grazie a tutti.
Rispondi quotando
