Søg
Avatar billede alex15 Nybegynder
27. marts 2007 - 15:11 Der er 17 kommentarer og
1 løsning

Hvordan får man et stort pic, til at skifte ved klik på lille pic

Hej Eksperter

Ved ikke præcis hvor dette her indlæg skal ind henne? Men går næsten ud fra at det må være inde under noget Script!

Jeg står her og er igang med min 2 hjemmeside (Jeg er total nybegynder) og nu vil jeg gerne have lavet sådan at man ved at klikke på et af de små billeder. at det store skrifter over til det lille..

http://www.fluii.dk/uploadok.asp?name=FluiiDK-1723.jpg&size=124612&titel=CCC&nick=Alex&id=1723

Der kan du se min hjemmeside.

Vil også gerne have hjælp til at sætte den ind i mit html dokument, hvis jeg ikke selv kan finde ud af det..
Avatar billede roenving Novice
27. marts 2007 - 15:27 #1
Tjah, f.eks.

Små billeder:

<img src="CCCbil27_thumb.jpg" onmouseover="changeBig(this.src);">

Store billede:

<img src="defaultImage.jpg" id="bigPic">

<script type="text/javascript">
function changeBig(pic){
  document.getElementById("bigPic").setAttribute("src",pic.replace(/_thumb/,""));
}
</script>

-- her lavet til, at der er oprettet thumbnails af billederne, samtidig med, at der findes store udgaver !-)
Avatar billede alex15 Nybegynder
27. marts 2007 - 15:34 #2
Okay, og hvor skal de forskellige ting så indsættes henne? min fil ser sådan her ud:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Velkommen til Classic Car Club</title>
<link rel="stylesheet" type="text/css" href="skabelon.css">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#site{position:relative;width:800px;margin:0 auto;height:100%;text-align:center;font-size:24px;background-color:#000000;}
.style1 {color: #FF0000}
</style>
</head>
<body>
<div id="site">
  <div id="Layer1"><A HREF="billeder/forside.html"><img border="0" src="billeder/banner/top/banner700.jpg" alt="" width="700" height="75" /></div>
   
  <div id="Layer2"> <p align="left">
 
<A HREF="forside.html"><img border="0" src="billeder/knap/Knap-forside1.jpg"
alt="Forside" name="bil1" onMouseOver="this.src='billeder/knap/Knap-forside2.jpg'"
onmouseout="this.src='billeder/knap/Knap-forside1.jpg'" width="65" height="25"></A><img src="billeder/knap/Knap-mellemrum.jpg" width="25" height="25" /><A HREF="biler.html"><img border="0" src="billeder/knap/Knap-biler1.jpg"
alt="Biler" name="bil1" onMouseOver="this.src='billeder/knap/Knap-biler2.jpg'"
onmouseout="this.src='billeder/knap/Knap-biler1.jpg'" width="41" height="25"></A><img src="billeder/knap/Knap-mellemrum.jpg" width="25" height="25" /><A HREF="systemet.html"><img border="0" src="billeder/knap/Knap-systemet1.jpg"
alt="Systemet" name="bil1" onMouseOver="this.src='billeder/knap/Knap-systemet2.jpg'"
onmouseout="this.src='billeder/knap/Knap-systemet1.jpg'" width="81" height="25"></A><img src="billeder/knap/Knap-mellemrum.jpg" width="25" height="25" /><A HREF="arrangementer.html"><img border="0" src="billeder/knap/Knap-arrangementer1.jpg"
alt="Arrangementer" name="bil1" onMouseOver="this.src='billeder/knap/Knap-arrangementer2.jpg'"
onmouseout="this.src='billeder/knap/Knap-arrangementer1.jpg'" width="128" height="25"></A><img src="billeder/knap/Knap-mellemrum.jpg" width="25" height="25" /><A HREF="medlemskab.html"><img border="0" src="billeder/knap/Knap-medlemskab1.jpg"
alt="Medlemskab" name="bil1" onMouseOver="this.src='billeder/knap/Knap-medlemskab2.jpg'"
onmouseout="this.src='billeder/knap/Knap-medlemskab1.jpg'" width="105" height="25"></A>

</div>
 
 
 
  <div id="Layer3"></div>
 
  <div id="Layer4"></div>
  <div id="Layer5"><img src="billeder/banner/under/clio-v6.jpg" alt="" width="700" height="100" /></div>
 
  <div id="Layer6">
    <p align="right">
 
<A HREF="om_ccc.html"><img border="0" src="billeder/knap/knap-nede-om_ccc1.jpg"
alt="Om CCC" name="bil1" onMouseOver="this.src='billeder/knap/knap-nede-om_ccc2.jpg'"
onmouseout="this.src='billeder/knap/knap-nede-om_ccc1.jpg'" width="55" height="20"></A><img src="billeder/knap/knap-nede-mellemrum.jpg" width="10" height="20" /><A HREF="kontakt_os.html"><img border="0" src="billeder/knap/knap-nede-kontakt_os1.jpg"
alt="Kontakt os" name="bil1" onMouseOver="this.src='billeder/knap/knap-nede-kontakt_os2.jpg'"
onmouseout="this.src='billeder/knap/knap-nede-kontakt_os1.jpg'" width="72" height="20"></A><img src="billeder/knap/knap-nede-mellemrum.jpg" width="10" height="20" /><A HREF="download.html"><img border="0" src="billeder/knap/knap-nede-download1.jpg"
alt="Download" name="bil1" onMouseOver="this.src='billeder/knap/knap-nede-download2.jpg'"
onmouseout="this.src='billeder/knap/knap-nede-download1.jpg'" width="65" height="20"></A><img src="billeder/knap/knap-nede-mellemrum.jpg" width="10" height="20" /><A HREF="login.html"><img border="0" src="billeder/knap/knap-nede-login1.jpg"
alt="Login" name="bil1" onMouseOver="this.src='billeder/knap/knap-nede-login2.jpg'"
onmouseout="this.src='billeder/knap/knap-nede-login1.jpg'" width="37" height="20"></A>
 
  </div>


</div>
</body>

</html>
Avatar billede alex15 Nybegynder
27. marts 2007 - 15:39 #3
Og det store billede skal være i layer3 og de små billeder i layer 4
Avatar billede alex15 Nybegynder
27. marts 2007 - 15:49 #4
Super, fik det lige til at virke som det skal, så skal jeg bare lige lege lidt med hvilken størrelse de forskellige billeder skal have, kan jeg ikke bare skrive:

alt="" width="700" height="100" (ved de små billeder, hvis jeg vil have størrelse til at være den størrelse?
Avatar billede roenving Novice
27. marts 2007 - 15:58 #5
Så sætter du bare det store billede ind i layer3 og de små ind i layer4, scriptet skal bare være inde i enten head- eller body-tagget eller ligge i en ekstern fil !-)

-- men bemærk min kommentar om grundlaget, her er koden skrevet til thumbnails og fuld størrelse billeder !o]
Avatar billede alex15 Nybegynder
27. marts 2007 - 16:07 #6
Ja okay, jeg smed

<script type="text/javascript">
function changeBig(pic){
  document.getElementById("bigPic").setAttribute("src",pic.replace(/_thumb/,""));
}
</script>

Ind sammen med layer 3 (store billeder) og så virkede det :o) okay, men tak for hjælpen, tror det var det som jeg skulle bruge, giv lige et svar..!
Avatar billede roenving Novice
27. marts 2007 - 16:10 #7
Velbekomme '-)
Avatar billede alex15 Nybegynder
27. marts 2007 - 16:26 #8
Men er det den forkerte måde at skære ned i billedernes størrelse på? altså bare med at skrive alt="" width="700" height="100"?

Ville der være en mere korrekt måde og gøre det på?
Avatar billede roenving Novice
27. marts 2007 - 16:37 #9
Det bedste (for båndbredde og load-tid mv. !-) vil være at du har nogle rigtige billeder i en ordentlig kvalitet, som du kan fylde i det store billede, og så nogle thumbnails, som kan vises som små og så være kilde til de store (evt. kan man sætte en preloader igang, når siden er loadet, så det bliver mere glidende, hvis man kører over flere !-)

-- og tak for point ;~}
Avatar billede alex15 Nybegynder
27. marts 2007 - 16:38 #10
Ja okay, tror det er det som jeg har gjort..! Er det svært og gøre det sidste? med (evt. kan man sætte en preloader igang, når siden er loadet, så det bliver mere glidende, hvis man kører over flere !-)
Avatar billede roenving Novice
27. marts 2007 - 17:05 #11
Næh, en prloader vil bare begynde at loade billederne, når den kommer til det, f.eks. onload ...

-- det vil dog ikke forhindre, at browseren kan spørge om der er en ny udgave på serveren, men specielt hvis billederne er store, vil det blive en langt mndre kommunikation en en load ...

f.eks. i javascript-blokken:

//Her indsætter du de rigtige navne (og evt. sti) til dine store billeder
var pics =["billede1.jpg","billede2.jpg","billede3.jpg","billede4.jpg","billede5.jpg","billede6.jpg","billede7.jpg"];
window.onload = function(){
  var img = [];
  for(i=0,im=pics.length;im>i;i++){
    img[i] = new Image();
    img[i].src = pics[i];
  }
}
Avatar billede alex15 Nybegynder
27. marts 2007 - 17:26 #12
Kan man evt gøre at billederne KUN skifter når det er at man trykker på dem? og ikke at de skrifter når man bare flytter musen hen over dem?
Avatar billede roenving Novice
27. marts 2007 - 17:36 #13
Så skifter du onmouseover ud med onclick ...
Avatar billede alex15 Nybegynder
27. marts 2007 - 20:03 #14
okay, tak :)
Avatar billede alex15 Nybegynder
27. marts 2007 - 22:53 #15
Kan man evt. få den til at fade ind i hinanden, når man trykker på billederne?
Avatar billede roenving Novice
28. marts 2007 - 00:52 #16
Tjah, hrm, jo, det kan man da godt, men det kræver adskilligt mere kode (medmindre du forudsætter at dine brugere bruger den samme browser !o]

-- og umiddelbart vil jeg ikke anbefale det, når det er en rimelig simpel ting ...

-- men hvis det er voldsomt vigtigt, kan man da også lave den slags (design-mæssigt kan det være et must, men så _skal_ det også være et must !-)
Avatar billede alex15 Nybegynder
28. marts 2007 - 01:01 #17
Ja okay, den er ikke lige frem en must, synes bare at det måske kunne se meget godt ud.. Men okay, kan da også godt være at jeg kan overleve med det her..! hehe..!
Avatar billede roenving Novice
28. marts 2007 - 01:15 #18
Typen på fade kan ses her, men jeg vil ikke anbefale det til billedskift: http://roenving.users.whitehat.dk/WD5Opacity.html

-- men det har da været oppe før, se f.eks. http://www.eksperten.dk/spm/512430 !-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 21:05 Questyle M15i lydforstærker Af valby i Diverse
I går 18:27 Mærkeligt ikon på proceslinjen Af ErikHg i Windows
I går 13:54 Jeg skal have indstaleret Garmin express Af skolevej321 i Andet software
I går 10:48 Back up af foto til ekstern harddisk Af hkprofil i Office & Kontorpakker
10/0517:11 Har glemt navn på min ene konto på eksperten! Af ErikHg i Fri debat
White papers
Flere white papers »