Non sono un grande utilizzatore di Javascript per cui chiedo a voi un aiutino per completare uno script per una proiezione che vorrei fare a Natale con gli amici per un gioco a quiz.
Ho trovato questo script sul sito che andrebbe bene per il mio scopo.
Vi spiego velocemente quello che vorrei ottenere.
Ho una videata con 9 caselle. Quando passo su una casella si visualizza il tema e la domanda alla quale bisogna rispondere (tutto questo lo riesco a fare con lo script che ho trovato sul sito).
Quello che non riesco a fare è la seguente operazione.
Una volta che il candidato risponde esattamente alla domanda dovrei cliccare sul link (es. GEOGRAFIA) e far comparire nello stesso quadro una immagine (che sarà la porzione di una foto). Come posso fare per far comparire l'immagine nel quadro (facendola rimanere anche quando poi verranno scoperti man mano anche gli altri quadri)?
Vi ringrazio davvero tanto per l'aiuto
Fab
<!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" lang="it">
<head>
<title>Galleria con effetto fade - Esempio JavaScript scaricato da HTML.it</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<meta name="Robots" content="All" />
<meta name="Description" content="HTML.it - il sito italiano sul Web publishing" />
<meta name="Keywords" content="javascript" />
<meta name="Owner" content="HTML.it srl" />
<meta name="Author" content="HTML.it srl" />
<meta name="Copyright" content="HTML.it srl" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
//move the image in pixel
var move = -15;
//zoom percentage, 1.2 =120%
var zoom = 1.2;
//On mouse over those thumbnail
$('.item').hover(function() {
//Set the width and height according to the zoom percentage
width = $('.item').width() * zoom;
height = $('.item').height() * zoom;
//Move and zoom the image
$(this).find('img').stop(false,true).animate({'wid th':width, 'height':height, 'top':move, 'left':move}, {duration:200});
//Display the caption
$(this).find('div.caption').stop(false,true).fadeI n(200);
},
function() {
//Reset the image
$(this).find('img').stop(false,true).animate({'wid th':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});
//Hide the caption
$(this).find('div.caption').stop(false,true).fadeO ut(200);
});
});
</script>
<style>
body {
font-family:arial;
}
.item {
width:125px;
height:125px;
border:4px solid #222;
margin:5px 5px 5px 0;
/* required to hide the image after resized */
overflow:hidden;
/* for child absolute position */
position:relative;
/* display div in line */
float:left;
}
.item .caption {
width:125px;
height:125px;
background:#000;
color:#fff;
font-weight:bold;
/* fix it at the bottom */
position:absolute;
left:0;
/* hide it by default */
display:none;
/* opacity setting */
filter:alpha(opacity=80); /* ie */
-moz-opacity:0.8; /* old mozilla browser like netscape */
-khtml-opacity: 0.8; /* for really really old safari */
opacity: 0.8; /* css standard, currently it works in most modern browsers like firefox, */
}
.item .caption a {
text-decoration:none;
color:#0cc7dd;
font-size:16px;
/* add spacing and make the whole row clickable*/
padding:5px;
display:block;
}
.item .caption p {
padding:5px;
margin:0;
font-size:10px;
}
img {
border:0;
/* allow javascript moves the img position*/
position:absolute;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<h1>Galleria con effetto fade</h1>
<div class="item">
[img]1.gif[/img]
<div class="caption">
Geografia
Domanda1?</p>
</div>
</div>
<div class="item">
[img]2.gif[/img]
<div class="caption">
Storia
Domanda2?</p> </div>
</div>
<div class="item">
[img]3.gif[/img]
<div class="caption">
Letteratura
Domanda3?</p>
</div>
</div>
<div class="clear"></div>
<div class="item">
[img]4.gif[/img]
<div class="caption">
Arte
Domanda4?</p>
</div>
</div>
<div class="item">
[img]5.gif[/img]
<div class="caption">
Scienze
Domanda5?</p>
</div>
</div>
<div class="item">
[img]6.gif[/img]
<div class="caption">
Spettacolo
Domanda6?</p>
</div>
</div>
<div class="clear"></div>
<div class="item">
[img]7.gif[/img]
<div class="caption">
Sport
Domanda7?</p>
</div>
</div>
<div class="item">
[img]8.gif[/img]
<div class="caption">
Gossip
Domanda8?</p>
</div>
</div>
<div class="item">
[img]9.gif[/img]
<div class="caption">
Varie
Domanda9?</p>
</div>
</div>
<div class="clear"></div>
<div align="center">
[img]logo_htmlit.gif[/img]
<span style="font-size:80%; color:gray">sponsor</span>
<script language="javascript" type="text/javascript">
<!--
var browName = navigator.appName;
var SiteID = 1;
var ZoneID = 24;
var browDateTime = (new Date()).getTime();
if (browName=='Netscape')
{
document.write('<s'+'cript lang' + 'uage="jav' + 'ascript" src="http://adserver.html.it/a.aspx?ZoneID=' + ZoneID + '&Task=Get&IFR=False&Browser=NETSCAPE4 &PageID=90264&SiteID=' + SiteID + '&Random=' + browDateTime + '">'); document.write('</'+'scr'+'ipt>');
}
if (browName!='Netscape')
{
document.write('<s'+'cript lang' + 'uage="jav' + 'ascript" src="http://adserver.html.it/a.aspx?ZoneID=' + ZoneID + '&Task=Get&IFR=False&PageID=90264& SiteID=' + SiteID + '&Random=' + browDateTime + '">'); document.write('</'+'scr'+'ipt>');
}
// -->
</script>
<noscript>
<a href="http://adserver.html.it/a.aspx?ZoneID=24&Task=Click&Mode=HTML& SiteID=1&PageID=90264" target="_blank">
</a>
</noscript></div>
</body>
</html>
Rispondi quotando
