GoLive Ebenen und Bildergalerie

mhmedia

mhmedia

Aktives Mitglied
Thread Starter
Dabei seit
13.10.2004
Beiträge
778
Reaktionspunkte
7
Hallo,

ich habe meine HP in Golive neu gemacht und wollte nun auf den Fotoseiten das dort Thumbnails sind und wenn man mit der Maus darüber geht, dann soll in der Mitte das Bild in groß angezeigt werden.
Das habe ich nun - so dachte ich - mit Ebenen gelöst und in der Vorschau und in meinem Browser funkioniert auch alles tadellos. Wenn ich nun aber den Browser in seiner größe ändere und viele Menschen stellen sich denn ja nun mal anders ein, dann verrutschen die Ebenen und es sieht füchterlich aus.

Kann man die Eben in eine Tabelle stecken, damit sie dort auftauchen wo sie sollen oder gibt es noch ein andere Lösung?
Danke.

www.mhmedia.de
 
hey, nette Seite,Layout super
aber der schröder hat nach links ein Versatz ( Safarie )
da du anscheint nur hovereffekt machst, würde ich 3 Spalten und die anzahl der Thumpnailtabelllen erstellen. Die großen würde ich zentriert in der mitte
( also ein Quatrat ) das die Bilder in der Höhe und Breite gleich sind.
ich hoffe du verstehst was ich meine.


eisman
so in etwa
<body><table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50" height="50">&nbsp;</td>
<td width="50">&nbsp;</td>
<td width="300" rowspan="10" align="center" valign="middle">&nbsp;</td>
<td width="50">&nbsp;</td>
<td width="50">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="50" height="50">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="50" height="50">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="50" height="50">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td width="50">&nbsp;</td>
</tr>
<tr>
<td width="50" height="50">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
 
Aber wie kann ich denn den Over machen? Ich möchte ja, das man die Bilder in der Mitte sieht wenn man über die Thumbnails geht?
Ich dachte Hover geht immer nur am selben Ort, also wie oben in meiner Navigation?
 
… über die einfache Rollover Funktion lässt sich auch ein Remote Rollover schaffen,
einfach mal die Hilfe nach Remote Rollover durchforsten. ;)
Da gibst du dann einfach ein anderes Ziel für das Rollover an,… ist ganz simpel.

Greetz,…
 
Das versuche ich mal, allerdings ist die Hilfe dabei sehr kurz angebunden. Vielen Dank für den Tipp.
 
Das mit dem Remote Rollover verstehe ich nicht. Muß ich das Bild, das denn erscheinen soll schon einfügen? Woher weiß das Auslöserbild wo das andere erscheinen soll? Wie vergebe ich Name und ID für eine Bild?
Hat jemand mal ein Beispiel wie das mir Remote Rollover aussieht?
Danke
 
… klar, du definierst per Name/ID (z.B. rechts oben im Inspektor, bei markiertem Bild)
das Zielbild, und kannst somit im Rollover Fenster das Zielbild für dein Rollover
angeben.
 
Nun noch mal ganz langsam:
Ich plaziere ein Bild (das Große Bild) in mein Raster. Gebe ihm eine ID&Namen.
Dann erschient im Rolloverfenster das große Bild im Status NORMAL.
Wenn ich dann das Thumbnail anklicke erscheint im Rolloverfenster bei Status Normal das große und das kleine Bild und bei Mauseintritt erscheint das große, und dann?
Wie mache ich es denn, das man das große nur sieht wenn ich über das kleine mit der Maus fahre?
Danke
 
...schau dich mal bei den "aktionen" um, da findest du was du suchst.

...du kannst auf alles, auf das du einen link setzen kannst auch oder nur eine aktion setzen, das sind vorkonfigurierte scripts.

...dein problem mit der ausrichtung der "großen" bilder ist, das du #layer benutzt, die "absolut" ausgerichtet sind, das führt natürlich zu verschiebungen bei größenanderungen des browserfensters.

...ich würde eine zentrierte tabelle zwischen die kleinen bilder setzen. grundsätzlich eine entsprechend großes trans. gif für den start und für den wechsel der bilder gibt es ein script, das das trans. gif gegen das entsprechende bild wechselt, solange man auf dem kleinen ist.
problem ist dann nur die bilddaten....vielleicht fällt mir noch was ein ;)
 
wenn du nicht damit zurecht kommst, dann nimm dieses.
Muss die aber nur auf 3 Spalten modefezieren. bzw. erweitern
<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Projektor</title>
<meta name="generator" content="xy">

<script type="text/javascript"><!-- code verstecken

var vbildstart;
var vbild1;
var vbild2;
var vbild3;
var vbild4;
var vbild5;
var vbild6;
var vbild7;

// Definition von globalen Variablen (sie gelten für mehrere Funktionen)
// den Variablen werden in der folgenden Funktion Bilder zugewiesen

function bilder_vorladen ()
{
if (document.images)
{
// Der Begriff "var" muss hier wegglassen werden

vbildstart = new Image();
vbildstart.src = "images/start.gif";
vbild1 = new Image();
vbild1.src = "images/1.jpg";
vbild2 = new Image();
vbild2.src = "images/2.jpg";
vbild3 = new Image();
vbild3.src = "images/3.jpg";
vbild4 = new Image();
vbild4.src = "images/4.jpg";
vbild5 = new Image();
vbild5.src = "images/5.jpg";
vbild6 = new Image();
vbild6.src = "images/6.jpg";
vbild7 = new Image();
vbild7.src = "images/7.jpg";
}
}

function bildertausch(ort,bild)
{
if (document.images)
{
document.images[ort].src=bild;
}
}
// -->
</script>


</head>

<body onload="bilder_vorladen()">
<table border="0" cellpadding="10" cellspacing="0" width="100%" bgcolor="black">
<tr>
<td width="115" bgcolor="black">


<a href="#" onmouseover="bildertausch('anzeige', vbild1.src)"
onmouseout="bildertausch('anzeige', vbildstart.src)">
<img height="69" width="92" src="images/1.gif" border="0"></a>

<a href="#" onmouseover="bildertausch('anzeige', vbild2.src)"
onmouseout="bildertausch('anzeige', vbildstart.src)">
<img height="53" width="92" src="images/2.gif" border="0"></a>

<a href="#" onmouseover="bildertausch('anzeige', vbild3.src)"
onmouseout="bildertausch('anzeige', vbildstart.src)">
<img height="52" width="92" src="images/3.gif" border="0"></a>

<a href="#" onmouseover="bildertausch('anzeige', vbild4.src)"
onmouseout="bildertausch('anzeige', vbildstart.src)">
<img height="51" width="92" src="images/4.gif" border="0"></a>

<a href="#" onmouseover="bildertausch('anzeige', vbild5.src)"
onmouseout="bildertausch('anzeige', vbildstart.src)">
<img height="68" width="92" src="images/5.gif" border="0"></a>

<a href="#" onmouseover="bildertausch('anzeige', vbild6.src)"
onmouseout="bildertausch('anzeige', vbildstart.src)">
<img height="51" width="92" src="images/6.gif" border="0"></a>

<a href="#" onmouseover="bildertausch('anzeige', vbild7.src)"
onmouseout="bildertausch('anzeige', vbildstart.src)">
<img height="35" width="92" src="images/7.gif" border="0"></a>


</td>
<td align="left" valign="middle" bgcolor="black" width="100%">
<center>


<img height="266" width="270" src="images/start.gif" name="anzeige" hspace="40">
</center>
</td>
</tr>
</table>
</body>

</html>

eisman
 
… ok, also nochmal ganz langsam. … einmal das Thumb und zum
anderen das Zielpic und letztendlich das eigentliche pic. Du vergibst als
erstes mal dem Zielpic ne ID/Name … dann markierst du das auslösende
pic,… fügst ein neues Rollover hinzu (für Mauskontakt) … und unter ID/Name gibst
du für das Rollover, welches unter Mauskontakt steht die ID/Name des Zielpics an.

So, jetzt sollte das gehen,… imho gibt´s da aber auch noch ne Mgl. über Java kopfkratz

Greetz,…
 
@ liquid
Tut mir leid, es geht nicht.
@eismann
Danke für das Script, werde es mal versuchen.

Der Versuch mit der Tabelle, die zentriert ist - ist fehlgeschlagen, auch in einer Tabelle verrutschen die Ebenen wie sie wollen.
 
Hallo und danke für die Hilfe. Ich habe nun eine Diashow Aktion genommen und nun sind die Bilder auf jeden Fall da wo sie hinsollen.

Danke noch mal.
 
Zurück
Oben Unten