Silverrainsquare: Rollover Verschiebung

SELF-Forum

Rollover Verschiebung

Silverrainsquare
– Informationen zu den Bewertungsregeln

Guten Tag,

da ich noch ein Anfänger in Sachen Webdesign bin und trotz Suche keine Lösung für mein Problem gefunden habe, hoffe ich mit diesem Eintrag eine Lösung zu finden.
Zur Website:
Ich wollte eine grafisch ansprechende Website anfertigen die etwas anders als gewohnte Seiten funktioniert und darum habe ich zuerst per Adobe Photoshop ein Bild der Website gezeichnet um es danach im ImageReady durch sog. "Slices" zu bearbeiten (Leute mit Adobe Erfahrung wissen wahrscheinlich was ich meine) und als html direkt abzuspeichern (ja... ein generiertes Script). Dies mit dem Ziel danach positionierte Einzelbilder zu haben, die ich mit Rollover Buttons austauschen kann. Das nun "zerstückelte" Bild habe ich also an den entsprechenden Bildstücken mit einem Javascript für Rollover effekte ausgestattet, wobei sich allerdings schnell herausstellte, dass diese "Stücke" nicht mehr zu passen schienen und sich verschoben.

Wie könnte ich diese Verschiebung wieder "ausgleichen" oder verhindern? (Die Rollover Grafiken 1 und 2 haben jeweils exakt die gleichen Masse)

(Vielleicht wichtig zu wissen: ImageReady generiert das Bild neu in einer Tabelle und benutzt ein sog. "spacer.gif" zum Ausgleich von allfälligen Leerräumen (oder so). Es scheint keinen Einfluss zu haben, welchen Browser ich benutzte, "border" sind jeweils auf "0", bei Bedarf liefere ich auch gerne das script und/oder den html code)

Screenshots:

So sollte es mit Rollover buttons aussehen
http://www.pic-upload.de/07.08.08/lncv5n.jpg

So sieht es mit Rollover buttons aus
http://www.pic-upload.de/07.08.08/rb245p.jpg

Vielen Dank fürs durchlesen und helfen im Vorraus!
mfg

(so nebenbei: die Spacer.gif dateien habe ich bereits Stunden lang versucht anzupassen, die Leerräume ändern sich zwar um jeweils etwa 1 px, aber das ganze ist wirklich kein Spass und führt zu nichts, besser geworden ist es insgesamt nicht)

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Rollover Verschiebung

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    bei Bedarf liefere ich auch gerne das script und/oder den html code)

    ein link reicht sicher aus

    aber aufgrund deiner weiteren ausführungen würde ich spontan sagen: machs neu ;) spacer.gif hört sich wild an

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Rollover Verschiebung

      Silverrainsquare
      – Informationen zu den Bewertungsregeln

      bei Bedarf liefere ich auch gerne das script und/oder den html code)

      ein link reicht sicher aus

      aber aufgrund deiner weiteren ausführungen würde ich spontan sagen: machs neu ;) spacer.gif hört sich wild an

      Neumachen führt wohl zum gleichen Ergebnis. Ich habe bereits zwei Javascripts ausprobiert.
      Die Seite ist noch nicht online (FTP daten bekomme ich erst nächste Woche) darum hier mal der Code... Da sieht man auch wo das Spacer.gif überall rumwuchert (das spacer.gif ist ein Pixel gross)

      <html>  
<head>  
<title>Meteor</title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
  
<script language="JavaScript">  
<!--  
browser_name = navigator.appName;  
browser_version = parseFloat(navigator.appVersion);  
if (browser_name == "Netscape" && browser_version >= 3.0)  
{ rollover = 'true'; }  
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 4.0)  
{ rollover = 'true'; }  
else { rollover = 'false'; }  
if (rollover == 'true') {  
grafik1=new Image();grafik1.src="Bilder/meteor_03.jpg";  
grafik2=new Image();grafik2.src="Bilder/baum.gif";  
  
grafik3=new Image();grafik3.src="Bilder/meteor_09.jpg";  
grafik4=new Image();grafik4.src="Bilder/kanne.gif";  
  
grafik5=new Image();grafik5.src="Bilder/meteor_11.jpg";  
grafik6=new Image();grafik6.src="Bilder/flugi.gif";  
  
grafik7=new Image();grafik7.src="Bilder/meteor_16.jpg";  
grafik8=new Image();grafik8.src="Bilder/tauchonaut.gif";  
  
}  
function rein1(img,ref) { if (rollover == 'true') { document.images[img].src = ref; } }  
function raus1(img,ref) { if (rollover == 'true') { document.images[img].src = ref; } }  
//-->  
</script>  
  
  
</head>  
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">  
<!--  Bilderreihe -->  
<table id="Tabelle_01" width="1261" height="897" border="0" cellpadding="0" cellspacing="0">  
 <tr>  
  <td colspan="13">  
   <img src="Bilder/meteor_01.jpg" width="1260" height="152" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="1" height="152" alt=""></td>  
 </tr>  
 <tr>  
  <td colspan="8">  
   <img src="Bilder/meteor_02.jpg" width="506" height="118" alt=""></td>  
  <td>  
  
  
  
<a href="ziel.htm"  
onMouseOver="rein1('platzhalter1',grafik2.src);"  
onMouseOut="raus1('platzhalter1',grafik1.src);">  
<img src="Bilder/meteor_03.jpg" border="0"  
name="platzhalter1" alt="" > <!-- width="108" height="118" border="0" -->  
  
 </td>  
  
  
  
  
  <td colspan="4" rowspan="2">  
   <img src="Bilder/meteor_04.jpg" width="646" height="160" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="1" height="118" alt=""></td>  
 </tr>  
 <tr>  
  <td rowspan="9">  
   <img src="Bilder/meteor_05.jpg" width="52" height="626" alt=""></td>  
  <td rowspan="2">  
   <img src="Bilder/meteor_06.jpg" width="82" height="76" alt=""></td>  
  <td colspan="7">  
   <img src="Bilder/meteor_07.jpg" width="480" height="42" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="1" height="42" alt=""></td>  
 </tr>  
 <tr>  
  <td colspan="2" rowspan="3">  
   <img src="Bilder/meteor_08.jpg" width="166" height="166" alt=""></td>  
  <td colspan="2" rowspan="2">  
  
  
  
<a href="ziel.htm"  
onMouseOver="rein1('platzhalter2',grafik4.src);"  
onMouseOut="raus1('platzhalter2',grafik3.src);">  
<img src="Bilder/meteor_09.jpg"  border="0"  
name="platzhalter2" alt="Es klappt" > <!-- width="152" height="146" -->  
  
 </td>  
  
  
  
  
  <td rowspan="8">  
   <img src="Bilder/meteor_10.jpg" width="12" height="584" alt=""></td>  
  <td colspan="3" rowspan="7">  
  
  
<a href="ziel.htm"  
onMouseOver="rein1('platzhalter3',grafik6.src);"  
onMouseOut="raus1('platzhalter3',grafik5.src);">  
<img src="Bilder/meteor_11.jpg"  border="0"  
name="platzhalter3" alt="Es klappt" > <!--width="164" height="482"-->  
  
  
  </td>  
  
  
  <td colspan="3" rowspan="4">  
   <img src="Bilder/meteor_12.jpg" width="632" height="235" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="1" height="34" alt=""></td>  
 </tr>  
 <tr>  
  <td rowspan="7">  
   <img src="Bilder/meteor_13.jpg" width="82" height="550" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="1" height="112" alt=""></td>  
 </tr>  
 <tr>  
  <td colspan="2">  
   <img src="Bilder/meteor_14.jpg" width="152" height="20" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="1" height="20" alt=""></td>  
 </tr>  
 <tr>  
  <td rowspan="5">  
   <img src="Bilder/meteor_15.jpg" width="72" height="418" alt=""></td>  
  <td colspan="2" rowspan="3">  
  
<a href="ziel.htm"  
onMouseOver="rein1('platzhalter4',grafik8.src);"  
onMouseOut="raus1('platzhalter4',grafik7.src);">  
<img src="Bilder/meteor_16.jpg"  border="0"  
name="platzhalter4" alt="Es klappt" > <!-- width="148" height="138" -->  
  
  
  
  
 </td>  
  
  
  <td rowspan="5">  
   <img src="Bilder/meteor_17.jpg" width="98" height="418" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="1" height="69" alt=""></td>  
 </tr>  
 <tr>  
  <td rowspan="4">  
   <img src="Bilder/meteor_18.jpg" width="314" height="349" alt=""></td>  
  <td>  
   <img src="Bilder/meteor_19.jpg" width="14" height="15" alt=""></td>  
  <td rowspan="4">  
   <img src="Bilder/meteor_20.jpg" width="304" height="349" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="1" height="15" alt=""></td>  
 </tr>  
 <tr>  
  <td rowspan="3">  
   <img src="Bilder/meteor_21.jpg" width="14" height="334" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="1" height="54" alt=""></td>  
 </tr>  
 <tr>  
  <td colspan="2" rowspan="2">  
   <img src="Bilder/meteor_22.jpg" width="148" height="280" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="1" height="178" alt=""></td>  
 </tr>  
 <tr>  
  <td colspan="3">  
   <img src="Bilder/meteor_23.jpg" width="164" height="102" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="1" height="102" alt=""></td>  
 </tr>  
 <tr>  
  <td>  
   <img src="Bilder/spacer.gif" width="52" height="1" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="82" height="1" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="72" height="1" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="94" height="1" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="54" height="1" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="98" height="1" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="12" height="1" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="42" height="1" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="108" height="1" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="14" height="1" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="314" height="1" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="14" height="1" alt=""></td>  
  <td>  
   <img src="Bilder/spacer.gif" width="304" height="1" alt=""></td>  
  <td></td>  
 </tr>  
</table>  
<!-- Bilderende -->  
</body>  
</html>

      Kann man da irgendwie den Knopf lösen? Ein anderes Java Script?
      oder gibt es eine sinnvolle Alternative wie ich mein Vorhaben realisieren kann?

      Vielen Dank für die Antworten
      mfg

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Rollover Verschiebung

        suit Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Kann man da irgendwie den Knopf lösen? Ein anderes Java Script?
        oder gibt es eine sinnvolle Alternative wie ich mein Vorhaben realisieren kann?

        ja, code wegschmeissen und neu machen

        das hier könnte dir weiterhelfen
        http://www.wellstyled.com/css-nopreload-rollovers.html

        bau dein html mal bitte so auf (mit korrektem drumherum versteht sich)

        <ul>  
  <li><a id="meteor01" href="#"></a>Meteor 01<li>  
  <li><a id="meteor02" href="#"></a>Meteor 02<li>  
  <!-- usw. -->  
</ul>

        mehr wirst du vermutlich nicht brauchen

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Rollover Verschiebung

          Silverrainsquare
          – Informationen zu den Bewertungsregeln

          Kann man da irgendwie den Knopf lösen? Ein anderes Java Script?
          oder gibt es eine sinnvolle Alternative wie ich mein Vorhaben realisieren kann?

          ja, code wegschmeissen und neu machen

          das hier könnte dir weiterhelfen
          http://www.wellstyled.com/css-nopreload-rollovers.html

          bau dein html mal bitte so auf (mit korrektem drumherum versteht sich)

          <ul>

          <li><a id="meteor01" href="#"></a>Meteor 01<li>
            <li><a id="meteor02" href="#"></a>Meteor 02<li>
            <!-- usw. -->
          </ul>

          
>   
> mehr wirst du vermutlich nicht brauchen  
  
Vielen Dank für die schnelle Hilfe! (ich muss allerdings gestehen dass ich wohl noch Sorgenkind bleiben werde)  
  
Den alten Code hab ich weggeworfen und es mit der Liste versucht. Allerdings krieg ich die nur so hin, dass alle meine Bilder mit Abstand untereinander aufgelistet werden. Ich weiss nicht wie ich die Bilder in einer Liste positionieren kann. Tut mir wirklich leid falls ich etwas übersehen habe oder zu wenig know-how mitbringe, aber auch im Internet habe ich nichts zur positionierung gefunden.  
  
Danke für die Hilfe,  
mfg
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Rollover Verschiebung

            suit Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Den alten Code hab ich weggeworfen und es mit der Liste versucht. Allerdings krieg ich die nur so hin, dass alle meine Bilder mit Abstand untereinander aufgelistet werden. Ich weiss nicht wie ich die Bilder in einer Liste positionieren kann. Tut mir wirklich leid falls ich etwas übersehen habe oder zu wenig know-how mitbringe, aber auch im Internet habe ich nichts zur positionierung gefunden.

            das ganze internet zu durchsuchen wäre auch nicht nötig gewesen, die suche nach <http://de.selfhtml.org/css/eigenschaften/positionierung.htm@title="selfhtml positionierung"> hätte gereicht ;)

            zuerst sorgst du dafür, dass der der listencontainer (ul) ein hintergrundbild erhält, welches dem zustand des bildes ohne rollover-zustände entspricht

            aussen- und innenabstände sowie listenaufzählungszeichen werden entfernt, die breite und höhe des ul-elements passt du auf das hintergrundbild an - das element erhält zudem die eigenschaft position: relative;

            nun gibst du alle links innerhalb dieser pseudo-imagemap die eigenschaft display: block sowie position: absolute, 100x100px höhe/breite und eine sagen wir blaue hintergrundfarbe (damit man die dinger sieht)

            nun positionierst du die blauen kästen (angesprochen mit ihren ids) mittels top/left dort hin, wo du sie hinhaben willst

            als letztes definierst du den rollover-zustand (sprich das hintergrundbild beim mouseover statt der blauen farbe)

            wenns schwierigkeiten gibt, einfach den code herzeigen

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

      2. Rollover Verschiebung

        vaudi
        – Informationen zu den Bewertungsregeln

        Hallöchen,

        Erweitere die img-Tags doch mal noch um  border="0" - nicht dass dir da ein default-Wert für den Rand alles durcheinanderwürfelt...

        MfG
        vaudi

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln