Gå til innhold

Oppdatater et bilde uten å laste hele siden

unwill

Anbefalte innlegg

unwill

unwill

Skrevet
Skrevet

Jeg skal lage en side med ca 20-30 "lenker" som hver peker til et bildet. Lenkene skal være navnet på bildet og skal stå som en liste.

 

Når man klikker på disse lenkene ønsker jeg at bildet skal vises til høyre for disse lenkene. (helst uten å bruke frames). Jeg ønsker heller ikke å lage en html side for hvert bildet.

 

Er det noen form for script eller lignende jeg kan bruke? Hvis noen forstår problematikken min?

 

Eksempel:

- Eva

- Siri

- Elizabeth

- Chris

+ + +

 

Til høyre på denne siden er det plass til bilet og den forandres utifra hvilken person man klikker på. Og når denne lista blir lang skal man helst slippe å scrolle opp igjen for å finne bildet.

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
qualbeen

qualbeen

Skrevet
Skrevet (endret)

du kan sikkert løse dette med php. slik jeg forstår det ønsker du at når man trykker på en link så sendes man til en ny side som er helt lik, bare at bildet er byttet ut. I tillegg ønsker du ikke å kode alle disse sidene. Har jeg rett?

 

en mulig fremgangsmåte: gi lenkene navn som minside.com/album.php?bilde=filnavn.jpg, og legg til en liten php-sak som inkluderer bildet mhp hva bilde er satt til. Det gjør du ved:

<?php
 $image = $_GET["bilde"];

 //plasser der bildet skal dukke opp
 echo '<img src=$image, alt="" />';
?>

Altså: ved å endre filnavn.jpg til det bildene dine faktisk heter, vil bildene dukke opp på sida. Husk å lagre hjemmesiden som .php, i mitt eksempel album.php.

 

Håper du forstår prinsippet. Vær også klar over at dette ikke er det beste løsningsforslaget, bl.a. burde man egentlig ikke oppgi url til bildefilen i link-adressen, men ved å gjøre det enklest mulig er det antakeligvis enklest og forstå også ;)

Endret av qualbeen
Lenke til kommentar
Axentrix

Axentrix

Skrevet
Skrevet

Ajax er kjekt her ja:) Men det trengs jo ikke...

 

index.html

<html>
       <head>
       <script type="text/javascript" src="uten_ajax.js"></script>
       </head>
<body>
<a onclick="endre_bilde('navn1')">Navn 1</a><br />
<a onclick="endre_bilde('navn2')">Navn 2</a><br />
<!-- Div med html som viser frem bildet -->
<div id="div"></div>

 

uten_ajax.js

//SELVE funksjonen:
function endre_bilde(str)
{
if (str.length==0)
{
document.getElementById("div").innerHTML=""
return
}

document.getElementById("div").innerHTML="<img src=\"bilder/"+str+".jpg\" alt=\"\" />"
}

Denne henter bilder/navn1.jpg når det trykkes på "Navn 1"..

 

Kan lage en MED ajax etterpå, men kroppen trenger mat nå kjenner jeg...

Lenke til kommentar
Axentrix

Axentrix

Skrevet
Skrevet (endret)
Takk for hjelpen, brukte litt tid til å lese litt om AJAX, og det virker interessant. Hadde faktisk ikke hørt om det før.

 

Axentrix, hadde vært hyggelig om du kunne skrive litt ajax for meg så jeg kan lære litt.

6645503[/snapback]

Tar ett litt annet eksempel, men det blir noe av det samme.

 

Hvis du sjekker ut Dette eksempelet

 

index.php

<html>
       <head>
       <script type="text/javascript" src="ajax.js"></script>
       </head>
<body>
<form name="form">
<!-- Denne select-taggen kjører et vis() funksjonen i ajax.js, når verdien endres -->
<select name="folk" onchange="vis(this.value);">
<?php
// Her ligger det 3 filer, med informasjon om 3 ting, feks brukere, biler osv. 
$folk = glob("folk/*.php");
//Printer ut en <option> for hver ting/bruker/bil
foreach($folk as $key => $value)
       {
       include($value);
       echo "<option value=\"".($key + 1)."\">$fornavn $etternavn \n";
       }
?>
</select>
<!-- Denne diven blir fylt med innhold, av javascript -->
<div id="div"></div>

 

ajax.js

//Denne funksjonen finner ut hvilken måte browseren må henter informasjon, ganske viktig
// siden IE6 kun støtter ActiveXObject, mens opera, firefox og ie7 støter XMLHttpRequest()
function GetXmlHttpObject(handler)
       {
       var objXMLHttp=null
       if (window.XMLHttpRequest)
               {
               objXMLHttp=new XMLHttpRequest()
               }
       else if (window.ActiveXObject)
               {
               objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
               }
       return objXMLHttp
}


//Endrer verdi
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
//Fyller diven med id lik div, med responsText fra ajaxfunksjonen (Altså, data som serveren
//svarer med)
document.getElementById("div").innerHTML=xmlHttp.responseText
}
}


//SELVE funksjonen som blir gjort når select endrer verdi (onchange):
function vis(str)
{
//Egentlig uvesentlig
if (str.length==0)
{
document.getElementById("div").innerHTML=""
return
}

//Sjekker om browseren faktisk støtter ajax..
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}


var url="folk.php"
url=url+"?vis="+str
url=url+"&sid="+Math.random()
//Lager en URL, med et tilfeldig tall på slutten, så browseren ikke skal cache, ved 
//eventuelle endringer underveis

//Dette bestemmer hvilken funksjon som skal kjøres når xmlHttp sier ifra at den er "klar"
xmlHttp.onreadystatechange=stateChanged
//Sender en GET url til serveren.
xmlHttp.open("GET",url,true)
//Sender ingen data, kun GET som over..
xmlHttp.send(null)
}

 

folk.php

<?php

//Printer ut informasjon om "ting", hvis GET-variabel er satt.
if($_GET["vis"])
       {
       if(file_exists("folk/".$_GET["vis"].".php"))
               {
               include("folk/".$_GET["vis"].".php");
               echo "<table><tr><td style=\"width: 100px;\">Fornavn:</td><td>$fornavn</td></tr>
<tr><td>Etternavn</td><td>$etternavn</td></tr>
<tr><td>Bosted</td><td>$bosted</td></tr>
<tr><td>Tlf</td><td>$tlf</td></tr>
<tr><td>Iq</td><td>$iq</td></tr></table>";
               return;
               }
       }

?>

 

Håper du skjønner noe her:)

Kan gjerne forklare, hvis du spørr.

 

Du kan sjekke w3schools, så ser du flere eksempler.

Endret av Axentrix
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...