Just nu i M3-nätverket
Jump to content

Öppna information i en annan del av samma sida.


whapper

Recommended Posts

Hej,

Är ingen höjdare på det här.

Men jag har en "lista" med länkar

varje länk ska när man klickar på den öppna en bild med tillhörande info i rutan bredvid (www.lightweb.se/pidde/index/collection.php) dvs informationen ska komma upp där det nu står "More information comming soon!".

 

och om man klickar på någon av de andra länkarna i listan så byts

texten från föregående länk ut mot den nya bilden +info.

 

Hur gör man detta lättast?

 

Link to comment
Share on other sites

Är denna information statisk eller ligger den i databas?

Ligger den i databas skulle det vara fräckt med ajax, annars är det bara lite javascript.

 

 

I cellen till höger se till att det ligger en tom bild där med id="myImage"

samt ge det stycket som finns där (eller skall finnas det per default) id="myText"

 

För att lägga in text på de platser gör man så här i javascript

document.getElementById("myText").innerHTML="Min fina text.";
document.getElementById("myImage").src="/gfx/bilder/nybild1.jpg";

 

 

Detta är självklart mycket förenklat. Du får ha något som kontrollerar vilken länk du klickat på för att styra vilken information som skall läggas in.

 

Ett annat alternativ är att använda DOM-modellen och ta bort informationen helt i den cellen till höger och skapa nya text- och bildelement. Men det kanske är överkurs just nu.

 

Link to comment
Share on other sites

Tack så mycket för ditt svar.

Men jag får det lixom inte att funka.

Jag vill som sagt ha något som kontrollerar vilken länk jag klickat på.

 

Det finns idag 15 st länkar

varje länk kommer ha en bild samt ett litet textstycke som jag vill

ska visas i kollumnen till höger när man klickar på den.

När man klickar på nästa länk ska informationen och bilden från den

förra länken bytas ut mot den nya infon +bild.

 

allt jag behöver är exempel på 1-2 länkar

hur jag skulle kunna göra det, samt vart jag ska lägga kodstyckena, så tror jag att jag kan pyssla ihop resten själv.

 

texten är statisk.

 

Tack så jättemycket i förhand!

 

//Oscar, se gärna själva sidan http://www.lightweb.se/pidde/index/collection.php

 

Link to comment
Share on other sites

Är det längre textstycken kan du lägga in dem i var sin dold div och sedan visa/dölja rätt beroende på vilken länk du klickar på.

Bilderna kan du lägga in i en array(om nu inte bilden kan ingå i "text-diven") och sedan ändra src-värdet på ett img-element.

 

Link to comment
Share on other sites

Är det längre textstycken kan du lägga in dem i var sin dold div och sedan visa/dölja rätt beroende på vilken länk du klickar på.

Bilderna kan du lägga in i en array(om nu inte bilden kan ingå i "text-diven") och sedan ändra src-värdet på ett img-element.

 

Låter som en bra lösning,

har bara ingen aning om hur jag gör detta.

 

Låt oss säga att alla länkar har följande info.

 

Länk1(text1, samt bild1.jpg)

Länk2(text2, samt bild2.jpg)

Länk3(tex3, samt bild2.jpg)

osv. Bilderna kommer vara lika stora.

 

någon vänlig själ som kan ge en hint :).

 

//Oscar

 

Link to comment
Share on other sites

någon vänlig själ som kan ge en hint
Eftersom du verkar ny på javascript får du ett snabbt exempel på hur man kan göra det.

Läs koden och försök förstå vad som händer...!

<script type="text/javascript">
var TmpId="a";
function Lank(id,ImgUrl) {
document.getElementById(TmpId).style.display="none";
document.getElementById(id).style.display="block";
document.getElementById("TextBild").src=ImgUrl;
TmpId=id;
}
</script>

<body>
<div id="a">Micke</div>
<div id="b" style="display:none;">Hejhopp</div>
<a href="#" onclick="Lank('a','bild1.jpg');return false;">Micke</a>
<a href="#" onclick="Lank('b','bild2.jpg');return false;">Hejhopp</a><br />
<img id="TextBild" src="bild1.gif" width="100px" height="100px" />
</body>

 

Link to comment
Share on other sites

Lätt värt poäng för Mickes tips samt bra genomförande.
Motpoäng för din uppskattning på andras problem/frågor!

 

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...