Javascript

[Cassiopeja83]

Hejsan!

Jag håller på att göra en hemsida och skulle behöva ett script som visar mina thumbnails som stora bilder på samma sida, ej i ett nytt fönster!
Jag har letat hur mycket som helst,utan framgång. Det jag hittade var ett script som gör det jag vill men som även lägger till en bildtext. Kan jag ändra scriptet och ta bort texten? Eller är det någon som har ett bra på lager?

Tacksam för all hjälp jag kan få!

Obs, är ej intresserad av flash.

Mvh Maria

Länkar till scriptet jag hittade. (Klicka på visa bildhantering sedan är det andra scriptet uppifrån)

http://www.supportdata.net/java2/index.html

 

[Grahn_]

Testa att ta bort raden

document.visatext.Minbildtext.value = Bildtexten;

och raderna

<form name="visatext">
<textarea name="Minbildtext" rows="3" cols="24"></textarea>
</form>

Jag har inte testat själv och är ingen hejare på javascript, men det kanske är värt ett försök.

 

[oskärpt]

Utöver det Anders skriver så ska du även bort alla rader mellan:
"Bildtexten = new Array(4);"
till:
"function visaBild(bildNamn) {" (men inte denna rad)

Ta sedan bort allt som ser ut såhär:
onMouseOver='Beskriv("1");
onMouseOver='Beskriv("2");
etc...

 

[Gårdis]

Själv kör jag:

http://www.airtightinteractive.com/simpleviewer/


Som exempel kan jag visa hur det blir på min sida:

www.gardsater.se

 

[oskärpt]

Victor, jag gillar också den...

Men hon skrev "Obs, är ej intresserad av flash."

 

[Grahn_]

oskärpt skrev:
Utöver det Anders skriver så ska du även bort alla rader mellan:
"Bildtexten = new Array(4);"
till:
"function visaBild(bildNamn) {" (men inte denna rad)

Ta sedan bort allt som ser ut såhär:
onMouseOver='Beskriv("1");
onMouseOver='Beskriv("2");
etc...

Jo om man vill göra det snyggt i koden så Men slutresultatet ändras väl inte? Eftersom Beskriv() är tom så händer inget ändå vid onMouseOver. Inte heller arrayen används.

Men jag håller med om att det är trevligare att ta bort kod som ändå inte används Försäkte mest bara föreslå en så enkel lösning som möjligt (om det nu skulle fungera).

 

[Cassiopeja83]

Tack!

Tack snälla för svaren! Ska försöka ta bort texten.

Viktor, din sida var jätte snygg och jag har kollat in simpleviewer men tycker inte att det riktigt passar på min sida.

Mvh Maria

 

[Cassiopeja83]

Är detta rätt?

Visa bilder med bildtext

Steg 1-3
1. Lägg följande kod mellan HEAD-taggarna

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Karin Andersson -->
<!-- Webbplats: http://www.supportdata.net -->

<!-- Göm skriptet
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);


function visaBild(bildNamn) {
if (ns3up || ie4up) {
imgOn = ("" + bildNamn);
document.startbild.src = imgOn;
}
}
// Sluta gömma -->
</script>

2. Lägg tabellen med textarean mellan BODY-taggarna

<center>
<table width=210 border=0 cellspacing=0 cellpadding=3>
<tr>
<td colspan=3 align=center width="402"><img name="startbild" src="../bilder/color1.jpg" border=0 width="210" height="158"></td>
</tr>
<tr>
<td align="left"><a href="javascript:visaBild('../bilder/color1.jpg');"><img src="../bilder/color1_small.jpg" border=0 width="66" height="50"></a></td>
<td align="left"><a href="javascript:visaBild('../bilder/color5.jpg');"><img src="../bilder/color5_small.jpg" border=0 width="66" height="50"></a></td>
<td align="left"><a href="javascript:visaBild('../bilder/color3.jpg');"><img src="../bilder/color3_small.jpg" border=0 width="66" height="50"></a></td>
</tr>
<td align="left"><a href="javascript:visaBild('../bilder/color4.jpg');"><img src="../bilder/color4_small.jpg" border=0 width="66" height="50"></a></td>
<td align="left"><a href="javascript:visaBild('../bilder/color2.jpg');"><img src="../bilder/color2_small.jpg" border=0 width="66" height="50"></a></td>
<td align="left"><a href="javascript:visaBild('../bilder/color6.jpg');"><img src="../bilder/color6_small.jpg" border=0 width="66" height="50"></a></td>
<tr>
<td colspan="6" width="492">
</td>
</tr>
</table>
</center>

3. Ändra bildtexterna, bildfilernas namn och antalet bilder så att det passar dig. Snygga sedan till tabellen så att småbilderna visas prydligt. Glöm inte att ändra sökvägarna till bilderna.

 

[macgunde]

Kolla in min gamle portfolio om det är på ett sådant sätt du vill ha det...

http://www.danneman-design.com/html/photo.html

När man drar över tumnaglarnna så visas en större på ett annat ställe av sidan,,,

 

[Cassiopeja83]

macgunde skrev:
Kolla in min gamle portfolio om det är på ett sådant sätt du vill ha det...

http://www.danneman-design.com/html/photo.html

När man drar över tumnaglarnna så visas en större på ett annat ställe av sidan,,,

Hej Daniel!

Nja, inte riktigt vad jag menade, jag vill att man ska "klicka" så att bilden fastnar tills man klickar på nästa...men vad har du använt dig av?

Mvh Maria

 

[macgunde]

Vill du ha på detta sätt då?
Kolla in denna webbsida:
http://min.mac.se/danneman/mia/photo.html

 

[macgunde]

Scriptet för båda sajterna

<SCRIPT LANGUAGE="JavaScript">
   <!--
  function visaBild (bildURL) {
    document.LinkBild.src=bildURL;
  }
  //-->
  </SCRIPT>

http://min.mac.se/danneman/mia/

<A HREF="JavaScript:visaBild('bild som ska visas.jpg');"><img src="din tumnagel.gif" width="#" height="#"></A>

danneman-design.com

<a href="#" onMouseover="visaBild ('oversikt','.till länkad bild');" onMouseout ="visaBild ('oversikt','tillbaka till den gamla bilden');"><img src="tummnageln"  width="40" height="40" border="0"></td>

För att bilden ska visas på ett speciellt ställe så måste du ha en exakt lika stor bild, kan vara genomskinlig, med taggen som koden ovanför blir hänvisad till.

<IMG SRC="photo/photo.gif" NAME="LinkBild" BORDER="0">

Ett javascript som kan användas på båda dessa sätt väldigt smidigt.

Mvh daniel

 

[Anddje]

nu hjälper jag inte med topic på något sett, men känner att jag måste:

http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/tags/default.asp

Jag önskar att folk kunde lära sig webbdesign från sidor som inte uppdaterades senast 1995

Fina CSS-exempel: http://csszengarden.com