Keskustelu: Nettisivujen teko: Kuva uudelle sivulle

Minulla on "kuvagalleria" -sivu jossa kuvat ovat thumbnailsseina. Kuvia klikkaamalla, pitäisi niiden aueta toiselle sivulle.
Haluaisin että kaikki kuvat aukeavat samalle sivulle ja vain klikattu kuva, ei muita.
Tämä onnistuu ilmeisesti kirjoittamalla scripti, mutta ongelma on siinä ettei taidot riitä?=(

Oletko kokeillut tehdä kuville linkkiä, jossa linkin urli olisi kuvan osoite?

Minulla on 'lähettävällä' sivulla koodia taulukoiden soluissa tyyliin:

<a href="images.html">
<img alt="talo" src="home002024.jpg" width="87" height="129" border="1" cellspacing="0" cellpadding="0"></a>

Eli tällä images sivulla pitäisi näyttää vain kulloinkin klikattu kuva...

<a href="home002024.jpg">
<img alt="talo" src="home002024.jpg" width="87" height="129" border="1" cellspacing="0" cellpadding="0"></a>

?

Ei, en halua avata vain kuvatiedostoja omiin ikkunoihinsa, koska se näyttää kököltä eikä palvele tarkoitusta.
Vaan haluaisin nimenomaan avata kuvat tietylle sivulle (images.html). Visioni mukaan välittäisn img tagin src parametrin jotenkin scriptin kautta tuonne images.html sivulle ja siellä pääteltäisiin tuon parametrin avulla mikä kuva milloinkin näytettäisiin...

PHP:llä voit tehdä vaikka tällaisen järjestelmän:

***kuvat.html
<p>Valitse kuva:</p>
<ul>
<li><a href="naytakuva.php?kuva=kuva1.png">Kuva 1</a>
<li><a href="naytakuva.php?kuva=kuva2.png">Kuva 2</a>
<li><a href="naytakuva.php?kuva=kuva3.png">Kuva 3</a>
</ul>

***naytakuva.php
<?php
$kuva = $_GET['kuva'];
echo "<h1>$kuva</h1>";
echo "<img src=\"$kuva\">";
?>

Sivun naytakuva.php sisältö siis muuttuu sen mukaan, mitä sivun osoitteen loppuun kirjoitetaan.

Tuo olisi varmasti muuten hyvä ratkaisu, mutta nyt on kyse 'köyhän miehen' nettisivuista, eli ei ole palvelinta käytössä...

Ennen kuin pistät sivusi julkisuuteen, opettele xss ja muita turvallisuus asioita.. äläkä käytä suoraan tuota antin neuvoa!

Niin no tässä tapauksessa en voi käyttää php:tä, kun tosiaan ei ole palvelinta käytössä näille sivuille. Kiitos kuitenkin varoituksen sanasesta.

Jonkinlaisen viritelmän saa tehtyä JavaScriptilläkin. Sivulle naytakuva.html laitetaan <p id="kuva"></p>, ja jos osoite on muotoa naytakuva.html?kuva.jpg, niin lisätään kuva:

<script type="text/javascript">
var src = String(document.location).match(/\?(.*.jpg)/)[1];

if (src) {
    var img = document.createElement("img");
    img.src = src;
    img.alt = src;
    document.getElementById("kuva").appendChild(img);
}
</script>

Voit myös luoda kaikki tarvittavat HTML-sivut yksi kerrallaan itse, mikä voi tosin olla aika suuri urakka, jos kuvia on paljon. Tämä ratkaisu toimii kuitenkin täysin varmasti palvelimesta ja selaimesta riippumatta.

DrDeath kirjoitti:

Ennen kuin pistät sivusi julkisuuteen, opettele xss ja muita turvallisuus asioita.. äläkä käytä suoraan tuota antin neuvoa!

Mitä vikaa on neuvossani?

Kuvat ja sivut ovat samassa osoitteessa.

Eli siis sivulla galleria.html on

<a href="images.html" kuva="home002024.jpg">
<img src="home002024.jpg" width="87" height="129" border="1" cellspacing="0" cellpadding="0"></a>

Tuo scripti ja P tagi tuli siis tuonne naytakuvat.html sivulle?

Mikähän meni vikaan kun klikkaan kuvaa galleria.html sivulla aukeaa naytakuvat.html ilman tuota kuvaa?

Pieni korjaus linkkiin:

<a href="images.html?home002024.jpg">

En tosin juurikaan testannut tuota, joten voi olla että ei toimi kuitenkaan.

DLS kirjoitti:

Tuo scripti ja P tagi tuli siis tuonne naytakuvat.html sivulle?

Jep.

ääh tumpelo kun on niin ei sitten millään..
Eli nyt minulla menee koodi näin:

galleria.html

<a href="naytakuva.html?home002024.jpg">
<img src="home002024.jpg" width="87" height="129" border="1" cellspacing="0" cellpadding="0"></a>

ja naytakuvat.html

<script language=JavaScript>
var src = String(document.location).match(/\?(.*.jpg)/)[1];

if (src) {
    var img = document.createElement("img");
    img.src = src;
    img.alt = src;
    document.getElementById("kuva").appendChild(img);
}
</script>

<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
    <tr>
	<td>
		<p id="kuva"></p>
	</td>

Kehtaanko kysyä vielä että missä mättää?

DLS kirjoitti:

Kehtaanko kysyä vielä että missä mättää?

Selitin aika huonosti. Siirrä <script> loppuun, koska se ei voi löytää <p>:tä jos sitä ei vielä ole.

Antti Laaksonen kirjoitti:

Mitä vikaa on neuvossani?

Veikkaisin että se on vikana kun tuolla tyylillä saa katsottua ihan mitä tahansa tiedostoja palvelimelta jos vain tietää tiedostonimen

Jes, nyt futaa.
Todella iso kiitos vaivan näöstä ja ennen kaikkea kärsivällisyydestä =)

Hyvä, että sopiva ratkaisu löytyi, mutta keskustelu jatkuu vielä:

temu92 kirjoitti:

Antti Laaksonen kirjoitti:

Mitä vikaa on neuvossani?

Veikkaisin että se on vikana kun tuolla tyylillä saa katsottua ihan mitä tahansa tiedostoja palvelimelta jos vain tietää tiedostonimen

Tai ainakin minkä tahansa kuvatiedoston. Mutta eikö tiedostoja voi sitten katsella ilmankin tuota "turvatonta" koodiani, kun sehän vain tulostaa HTML-sivun?

Koska tuota käyttäjältä tulevaa dataa ei filtteröidä, käyttäjä pystyy tulostamaan omia tagejaan. Myös JavaScriptiä, jolla voi sitten muuttaa formien kohteita ynnä muuta mukavaa.