Beiträge von aila

aila

auch wenn ich nur ein bild verwende, werden das große und das kleine bild gleichzeitig angezeigt.

das problem muss irgendwie bei dem "showpic" liegen.
ich hatte nämlich erst bei den new image bildern einen schreibfehler in der url.
die bilder wurden aber trotzdem alle angezeigt, da die url bei den id="showpic" richtig war.
naja, und die IDs wurden ja automatisch nummeriert, sobald ich das dokument neu geöffnet hatte.
was also tun bei mehreren bildern??
ich werd aber auch nicht so richtig aus dem quelltext schlau. die funktion heißt ja
function show(id)
es werden aber 2 IDs definiert. einmal für die bilder direkt und dann für "showpic".
auf welche ID greift die funktion eigentlich zurück??

nachtrag:
kann es sein, dass ich bei mehreren bilder wirklich nur für ein einziges bild mit
<img id="show" src="url">
definieren muss?? da hab ich wohl deinen code erst falsch verstanden.
ich hab jetzt nämlich alle anderen IDs gelöscht und jetzt wird nur noch ein bild angezeigt. und wenn ich dann die anderen vorschaubilder anklicke, wird auch nur das jeweilige bild angezeigt, so wie ich es eigentlich auch wollte.
kann man das auch noch einstellen, dass man erst gar kein bild sieht, wenn man die seite das erste mal lädt?

und warum sollte ich abstand von position absolut nehmen. muss ich dafür mit css arbeiten?

aila

was soll ich sagen, es funktioniert immer noch nicht. es zeigt alle bilder auf einmal an und wenn ich die vorschaubilder anklicke funktioniert auch nix.
bin ich wirklich zu blöd dafür???

bei der id schreib ich doch nur die bildnummer hin oder?
und da ist dann auch wieder das problem mit dem showpic. sobald ich das dokument schließe und neu öffne, kommt wieder die fehlermeldung mit den bildern und die id="showpic" wird nummeriert, wodurch es aber auch nicht besser wird. nur das halt wieder das aktuelle bild in den vordergrund rückt.

also das wäre mein quelltext. stimmt der überhaupt?

HTML

<script type="text/javascript">
/*<![CDATA[*/
var bilder = new Array();
bilder[0] = new Image();
bilder[0].src = "bilder/g-flascheng.jpg";
bilder[1] = new Image();
bilder[1].src = "bilder/g-stilllebeng.jpg";
 
function show(id)
{var target = document.getElementById("showpic"); 
target.src=bilder[id].src;}
/*]]>*/
</script>
</head>
 
<body>
<img onclick="show('0')" src="bilder/g-flaschen.jpg" style="position:absolute; top:120px; left:160px"> 
<img onclick="show('1')" src="bilder/g-stillleben.jpg" style="position:absolute; top:120px; left:250px">
 
<img id="showpic" src="bilder/g-flascheng.jpg" style="position:absolute; top:120px; left:360px">
<img id="showpic" src="bilder/g-stilllebeng.jpg" style="position:absolute; top:120px; left:360px">

Alles anzeigen

aila

HTML

<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <meta name="generator" content="Adobe GoLive">
  <title>Unbenannte Seite</title>
  <style type="text/css" media="screen"><!--
#navigation { background-image: url(bilder/hintergrund.png); visibility: visible; position: absolute; top: 60px; left: 0; width: 100%; height: 30px }
#fenster  { background-color: #eaeaea; visibility: visible; position: absolute; top: 0; left: 0; width: 100%; height: 100% }
#kopfzeile { background-image: url(bilder/farbstreifen.png); visibility: visible; position: absolute; top: 0; left: 0; width: 100%; height: 60px }
#navigationseite { background-image: url(bilder/farbstreifen.png); visibility: visible; position: absolute; top: 0; left: 0; width: 130px; height: 100% }
--></style>
<script type="text/javascript">
/*<![CDATA[*/
function show(url){
var target = document.getElementById('showpic'); 
target.src=url;
}
/*]]>*/
</script>
  <csscriptdict import>
   <script type="text/javascript" src="[URL]file:///C:/.../Adobe/Adobe%20GoLive/Settings7/JScripts/GlobalScripts/CSScriptLib.js"></script[/URL]>
  </csscriptdict>
  <csactiondict>
   <script type="text/javascript"><!--
var preloadFlag = false;
function preloadImages() {
 if (document.images) {
  pre_buttonm_ro = newImage('bilder/buttonm-ro.png');
  pre_buttonm_u = newImage('bilder/buttonm-u.png');
  pre_buttonp_ro = newImage('bilder/buttonp-ro.png');
  pre_buttonp_u = newImage('bilder/buttonp-u.png');
  pre_buttons_ro = newImage('bilder/buttons-ro.png');
  pre_buttons_u = newImage('bilder/buttons-u.png');
  pre_buttoni_ro = newImage('bilder/buttoni-ro.png');
  pre_buttoni_u = newImage('bilder/buttoni-u.png');
  pre_buttonf_ro = newImage('bilder/buttonf-ro.png');
  pre_buttonf_u = newImage('bilder/buttonf-u.png');
  preloadFlag = true;
 }
}
// --></script>
  </csactiondict>
 </head>
 <body onload="preloadImages();"  background="bilder/farbstreifen.png" style="margin:0; padding:0" bgcolor="#1b8104" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
  <div id="fenster"></div>
  <div id="navigationseite"></div>
  <div id="navigation"></div>
  <div id="kopfzeile"></div>
  <p><a href="grafik.html" target="_self"><img id="buttong" border="0" name="buttong" src="bilder/buttong-u.png" alt="Grafik" style="position:absolute; top:120px; left:0px"></a></p>
  <p><a onmousedown="changeImages('buttonm','bilder/buttonm-u.png');return true" onmouseup="changeImages('buttonm','bilder/buttonm-ro.png');return true" onmouseover="changeImages('buttonm','bilder/buttonm-ro.png');return true" onmouseout="changeImages('buttonm','bilder/buttonm.png');return true" href="malerei.html" target="_self"><img id="buttonm" border="0" name="buttonm" src="bilder/buttonm.png" alt="Malerei" style="position:absolute; top:150px; left:0px"></a></p>
  <p><a onmousedown="changeImages('buttonf','bilder/buttonf-u.png');return true" onmouseup="changeImages('buttonf','bilder/buttonf-ro.png');return true" onmouseover="changeImages('buttonf','bilder/buttonf-ro.png');return true" onmouseout="changeImages('buttonf','bilder/buttonf.png');return true" href="fotografie.html" target="_self"><img id="buttonf" border="0" name="buttonf" src="bilder/buttonf.png" alt="Fotografie" style="position:absolute; top:180px; left:0px"></a></p>
  <p><a onmousedown="changeImages('buttonp','bilder/buttonp-u.png');return true" onmouseup="changeImages('buttonp','bilder/buttonp-ro.png');return true" onmouseover="changeImages('buttonp','bilder/buttonp-ro.png');return true" onmouseout="changeImages('buttonp','bilder/buttonp.png');return true" href="pixel-art.html" target="_self"><img id="buttonp" border="0" name="buttonp" src="bilder/buttonp.png" alt="Pixel-Art" style="position:absolute; top:210px; left:0px"></a></p>
  <p><a onmousedown="changeImages('buttons','bilder/buttons-u.png');return true" onmouseup="changeImages('buttons','bilder/buttons-ro.png');return true" onmouseover="changeImages('buttons','bilder/buttons-ro.png');return true" onmouseout="changeImages('buttons','bilder/buttons.png');return true" href="service.html" target="_self"><img id="buttons" border="0" name="buttons" src="bilder/buttons.png" alt="Service" style="position:absolute; top:240px; left:0px"></a></p>
  <p><a onmousedown="changeImages('buttoni','bilder/buttoni-u.png');return true" onmouseup="changeImages('buttoni','bilder/buttoni-ro.png');return true" onmouseover="changeImages('buttoni','bilder/buttoni-ro.png');return true" onmouseout="changeImages('buttoni','bilder/buttoni.png');return true" href="impressum.html" target="_self"><img id="buttoni" border="0" name="buttoni" src="bilder/buttoni.png" alt="Impressum" style="position:absolute; top:270px; left:0px"></a></p>
  <input type="image" src="bilder/bleistift-u.png" alt="Bleistift" style="position:absolute; top:60px; left:160px">
  <a href="grafik-buntstift.html" target="_self"><img border="0" src="bilder/buntstift.png" alt="Buntstift" style="position:absolute; top:60px; left:290px"></a>
 
 <img onclick="show('bilder/g-flascheng.jpg')" src="bilder/g-flaschen.jpg" style="position:absolute; top:120px; left:160px"> 
 <img onclick="show('bilder/g-stilllebeng.jpg')" src="bilder/g-stillleben.jpg" style="position:absolute; top:120px; left:250px">
 <img onclick="show('bilder/g-kaktusg.jpg')" src="bilder/g-kaktus.jpg" style="position:absolute; top:210px; left:160px">
 <img onclick="show('bilder/g-portraitg.jpg')" src="bilder/g-portrait.jpg" style="position:absolute; top:210px; left:250px">
 <img onclick="show('bilder/g-lippenstiftg.jpg')" src="bilder/g-lippenstift.jpg" style="position:absolute; top:300px; left:160px">
 <img id="showpic2" src="bilder/g-flascheng.jpg" style="position:absolute; top:120px; left:360px">
 <img id="showpic3" src="bilder/g-stilllebeng.jpg" style="position:absolute; top:120px; left:360px">
 <img id="showpic4" src="bilder/g-kaktusg.jpg" style="position:absolute; top:120px; left:360px">
 <img id="showpic5" src="bilder/g-portraitg.jpg" style="position:absolute; top:120px; left:360px">
 <img id="showpic" src="bilder/g-lippenstiftg.jpg" style="position:absolute; top:120px; left:360px">
 
 </body>
</html>

Alles anzeigen

falls du einen screenshot für einen bessere vorstellung brauchst, sag bescheid

aila

wenn ich diesen quelltext eingebe, hab ich das problem, was ich anfangs schon hatte.
das erste bild verschwindet erst, wenn ich ein zweites mal mit der maus drübergehe.

ich habe auch noch mal den quelltext mit deiner ersten lösung komplett neu geschrieben. allerdings werden jetzt alle großen bilder auf einmal gezeigt. da ist nix versteckt.

so sieht der quelltext aus.

<script type="text/javascript">
/*<![CDATA[*/
function show(url){var target = document.getElementById('showpic');
target.src=url;}
/*]]>*/
</script>
</head>
<body >

<img onmouseover="show('bilder/g-flascheng.jpg')"
src="bilder/flaschen.jpg" alt="" height="60" width="60" border="0"
style="position:absolute; top:0px; left:0px">

<img onmouseover="show('bilder/g-stillleben.jpg')"
src="bilder/stillleben.jpg" alt="" height="60" width="60" border="0"
style="position:absolute; top:0px; left:70px">

<img id="showpic" src="bilder/g-flaschen.jpg">
<img id="showpic" src="bilder/g-stillleben.jpg">
</body>
</html>

eigentlich so, wie du geschrieben hattest. keine ahnung, warum es bei dem anderen dokument funktioniert hatte. das war aber so unübersichtlich geworden, weil ich erst mit tabelle gearbeitet hatte, darum hab ich alles neu gemacht.

und dann ist da noch was. wenn ich das neue dokument in golive öffnen will, erscheint die fehlermeldung, dass die großen bilder keinen eindeutigen namen habe und dass die bilder umbenannt werden
wenn ich dann ok klicke ist schon mal der fortschritt, dass das große bild in den vordergrund rückt, was ich auch sehen will (also wenn ich auf das vorschaubild klicke). allerdings sind die anderen bilder immer noch im hintergrund zu sehen.
im quelltext wird auch die id nummeriert.
das sieht dann so aus:

<img id="showpic" src="bilder/..." ...>
<img id="showpic2" src="bilder/..." ...>

aila

danke

funktioniert auch.

geht das auch, dass ich nicht immer die url der großen bilder eingeben muss?
vielleicht wo ich nur 'Layer1', 'layer2'...eingeben muss, da ich die ja schon vorher als ebene definiert hatte.

<style type="text/css" media="screen">
</style>

aila

oh sorry, hab ich vergessen zu ergänzen.
javascript hab ich natürlich auch im quelltext.

<script type="text/javascript">

</script>

den script hab ich im internet gefunden. muss ich da möglicherweise hier etwas ändern?

im prinzip möchte ich so eine funktion haben, wie bei den bildern auf dieser website:
http://www.grossartwork.com/html/hair.html

da ist mir aber der quelltext zu kompliziert und ich blicke bei den scripten nicht durch.

aila

hallo
ich bin gerade dabei eine showhide-funktion zu erarbeiten.

ich mache so eine art bildergallerie. wenn man auf die kleine vorschaubilder klickt, erscheint dann rechts das große bild.

ich möchte es so haben, wenn man auf das nächste vorschaubild klick, soll das vorige große bild wieder verschwinden und das aktuelle bild soll groß erscheinen.

soweit funktioniert auch alles, aber ich weiß nicht, wie man es hinbekommt, dass das vorige große bild verschwindet.
es geht erst weg, wenn man ein zweites mal auf das vorschaubild klickt.

das geb ich in den quelltext ein:

(bei den kleinen vorschaubildern)

<a href="#" onclick="ShowHide('layer2')">
<img src="bilder/g-stillleben.jpg" alt="" height="60" width="60" border="0">
</a>

die layer sind im head so definiert:

<style type="text/css" media="screen">
</style>

...und im body:
<div id="layer2"><img src="bilder/g-stilllebeng.jpg" width="100%"></div>

aila

ich habe da ein problem mit tabellen und den eingefügten grafiken.

vorweg schon mal screenshots zur orientierung:

http://datamexx.onlinewelten.com/himitsu/255501…1/5/4005451.jpg

zur genaueren beschreibung.
ich hab eine tabelle (2 zeilen, 7 spalten, wobei ich bei der oberen zeile einige zellen verbunden habe (sieht man ja auf den ersten 3 bildern)).
ich habe die gesamte tabelle jeweils höhe und breite auf 100% gesetzt, damit sich die tabelle an den bildschirm anpasst.

die erste spalte habe ich auf die breite 20% gesetzt und die anderen auf automatisch. (da die gesamte tabelle auf 100% gesetzt ist, passt sich das dann alles theoretisch automatisch an)

die erste zeile habe ich in der höhe auf 100% gesetzt und die zweite auf automatisch. bei den eingefügten bildern (buttons) habe ich die höhe auf "bild" gesetzt und die breite 100%. damit will ich bewirken, dass sich die bilder in der breite in die zellen anpassen.
und da ich die höhe der buttons auf "bild" gesetzt habe und die untere zeile auf automatisch, werden die buttons auch nicht verzerrt dargestellt und werden proportional vergrößert und verkleinert dargestellt)
(die ersten 3 bilder im screenshot zeigen unterschiedliche "bildschirmformate" mit der wirkung, wie ich es auch EIGENTLICH haben will)
soweit die theorie. sobald ich aber die vorschau im internet explorer aktiviere, ist die erste spalte verschwunden und die bilder werden in originalgröße angezeigt und passen sich nicht dem bildschirm an (letztes bild bei den screenshots). was muss ich machen, damit die vorschau genauso aussieht und das macht, wie beim layout??

hier noch der quelltext:

hoffe jemand kann mir weiterhelfen.
(von css hab ich übrigens nicht so die ahnung, falls jemand damit ankommen sollte)

lg aila

Beiträge von aila

showhide layers

showhide layers

showhide layers

showhide layers

showhide layers

showhide layers

showhide layers

Tabellen und Grafiken