Mitenkähän tuollaisia "ponnahtavia" kuvia oikein saa laitettua sivuille? Kopioin lähdekoodin ja latasin omalle palvelimelle, mutta en onnistunut saamaan kuvista sellaisia, joita ao. linkissä on. Ei liene vaikea juttu, joten jos saisi vähän apua niin olisin kiitollinen!
Hyvältä tuo minusta näyttää.
ankzilla: Tietenkin toimii, koska se oli esimerkkisivu, jonka kaltainen sivu haluttaisiin tehdä.
Kyllä se pelaa, huomasitko tallentaa myös
script type="text/javascript" src="jquery.magnifier.js"
Tutustumisen arvoinen on tämäkin
http://blog.grenlibre.fr/2010/05/css3-transitions-available-on-firefox-3-7
Toimii chromessa, safarissa ja ff 3.7
peg, muistin tallentaa. Kumma juttu ettei toimi, kun kerran on html -kielellä kirjoitettu, eli pitäisi kopioituna toimia..
Mitä tapahtuu, kun koitat avata omalla sivullasi kuvaa? Onko kuvalla css-tiedostossa jotain määrityksiä miten ja mihin se aukeaa?
Numis97 kirjoitti:
peg, muistin tallentaa. Kumma juttu ettei toimi, kun kerran on html -kielellä kirjoitettu, eli pitäisi kopioituna toimia..
kai kopioit sen myös sinne serverille (ton ite javascript tiedoston siis)
tarvii myös jqueryn toimiakseen eli:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Katso myös, mitä virhekonsoli ilmoittaa. Firefoxissa CTRL + SHIFT + J, Explorerissa ikoni vasemmassa alakulmassa.
Mikähän nyt mahtaa olla kun ei toimi..?
http://www.ep-numismaatikot.fi/grilli.php
http://www.ep-numismaatikot.fi/tiedostot/jquery.js
Se, että on tallennettu PHP:nä ei varmaan haittaa?
<!-- Tekijä: Antti Rantala
Luotu Toukokuussa 2010-->
<!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=us-ascii" />
<meta name="keywords" content=
"kevarin grilli, kanavan grilli, jykän grilli, grilli, jyrkin grilli, kanavan kevari, jykä" />
<meta name="author" content="Antti Rantala" />
<title>Kevarin Grilli - Kuvagalleria</title>
<link href="tyylit.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src=
"http://www.ep-numismaatikot.fi/tiedostot/jquery.js">
</script>
<script type="text/javascript" src="/tiedostot/jquery.js">
//<![CDATA[
/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
//]]>
</script>
</head>
<body>
<table width="850" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td height="20" colspan="3" align="center"><img src=
"kuvat/bannerikoko.gif" width="850" height="150" alt=
"banneri" /></td>
</tr>
<tr>
<td colspan="3">
<ul class="glossymenu">
<li><a href="index.html"><b>Etusivu</b></a></li>
<li><a href="tuoteluettelo.html"><b>Tuoteluettelo</b></a></li>
<li class="current"><a href=
"kuvagalleria.html"><b>Kuvagalleria</b></a></li>
<li><a href="yritys.html"><b>Yritys</b></a></li>
<li><a href="yhteystiedot.html"><b>Yhteystiedot</b></a></li>
<li><a href="palaute.html"><b>Palaute</b></a></li>
</ul>
</td>
</tr>
<tr>
<td height="569" colspan="3" align="center" valign="top">
<br />
<table width="600" border="0" align="center" class="img">
<tr>
<td><img src="http://www.ep-numismaatikot.fi/kuvat/kortti.jpg" alt="kevaringrilli" class=
"magnify" style="width:200px; height:150px" /></td>
<td><img src="kuvat/kuva26.jpg" alt="kevaringrilli" class=
"magnify" style="width:200px; height:150px" /></td>
<td><img src="kuvat/kuva28.jpg" alt="kevaringrilli" class=
"magnify" style="width:200px; height:150px" /></td>
</tr>
<tr>
<td><img src="kuvat/uusi2.JPG" alt="kevaringrilli" class=
"magnify" style="width:200px; height:150px" /></td>
<td><img src="kuvat/kuva02.jpg" alt="kevaringrilli" class=
"magnify" style="width:200px; height:150px" /></td>
<td><img src="kuvat/vanha.JPG" alt="kevaringrilli" class=
"magnify" style="width:200px; height:150px" /></td>
</tr>
<tr>
<td><img src="kuvat/kuva08.jpg" alt="kevaringrilli" class=
"magnify" style="width:200px; height:150px" /></td>
<td><img src="kuvat/kuva13.jpg" alt="kevaringrilli" class=
"magnify" style="width:200px; height:150px" /></td>
<td><img src="kuvat/kuva10.jpg" alt="kevaringrilli" class=
"magnify" style="width:200px; height:150px" /></td>
</tr>
</table>
<p> </p>
</td>
</tr>
<tr>
<td width="135"><a href=
"http://www.kevaringrilli.fi">www.kevaringrilli.fi</a></td>
<td width="551">
<p> </p>
</td>
<td width="164">
<p> </p>
</td>
</tr>
</table>
</body>
</html>sulta puuttuu ainakin nämä
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script> <script type="text/javascript" src="jquery.magnifier.js"> </script>
Eikai script-tagille voi laittaa src-atribuuttia ja kirjoittaa sen sisään koodia!? Lisäksi se pitää päättää aina </script>-tagilla.
Ei voi. Script-tagin sisältäessä src-attribuutin ajetaan vain haettava koodi vaikka tagien sisään olisi jotain koodia kirjoitettukin. Näin siis nopean testin mukaan, speksistä en tiedä. JQueryn uusin versio on 1.4.2, joten eikun URLiksi http://ajax.googleapis.com/ajax/libs/jquery/1.4.
Olisiko ihan mahdotonta, että jos joku korjaisi koodin? En ole mikään asiantuntija näissä asioissa, kunhan perusteet osaan..
Aihe on jo aika vanha, joten et voi enää vastata siihen.