Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 1999 Teil von Juni

SELFHTML Forumsarchiv
Dynamische grafische Buttens und absolute Positionierung mit «DIV»

Informationsseite
  1. Seite (JAVASCRIPT) Dynamische grafische Buttens und absolute Positionierung mit «DIV» von Dietmar, 30. 06. 1999, 21:54
nach unten

Dynamische grafische Buttens und absolute Positionierung mit «DIV»

Die folgende Nachricht zum Thema stammt von: Dietmar, 30. 06. 1999, 21:54

Leider habe ich auch Probleme mit dem <DIV>-Tag. Transistor kämpft auch damit.
Der Code (Auszug):
<HTML>
<HEAD>
  <TITLE>C</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
Normal1 = new Image();
Normal1.src = "mgcs_3c.gif";
Zeiger1 = new Image();
Zeiger1.src = "mgcs_3cx.gif";
function Bildwechsel(Bildnr,Bildobjekt)
{
window.document.images[Bildnr].src=Bildobjekt.src;
}
//-->
</SCRIPT>
<DIV STYLE="POSITION:ABSOLUTE; TOP:185px; LEFT:5px; WIDTH:159px; Z-INDEX:5">
<A HREF="test1.html" onMouseOver="Bildwechsel(4,Zeiger2)" onMouseOut="Bildwechsel(4,Normal2)">
<IMG SRC="mgcs_4c.gif" ALT="mgcs_4c.gif (1'549 Bytes)" BORDER="0" WIDTH="159" HEIGHT="71">
</A></DIV>
</BODY>
</HTML>
Die Positionierung war notwendig geworden, weil sich Grafiken überdecken sollten.
Beim IE geht alles wunderbar. Netscape zeigt die Wechselgrafik nicht an.
Wo liegt das Problem?
Danke für die Hilfe!:-)

nach obennach unten

Dynamische grafische Buttens und absolute Positionierung mit «DIV»

Die folgende Nachricht zum Thema stammt von: Gero Takke, 30. 06. 1999, 22:01

Hi...
das Problem dabei ist, dass Netscape (ich benutz den IE überhaupt nicht, also keine ahnung ob das folgende auch mit dem ie funktioniert..) für jedes DIV ein neues document anfängt...
um mit JavaScript auf das dingen zugreifen zu können, sollte es erst mal eine ID haben:
<div id="doof" style="usw..">

nun kannst du im script  das document dieser id ansprechen, also

window.document.doof.document.images[bildnr]

diese info hab ich von http://dhtml.seite.net, die ich bei solchen sachen gerne empfehle ;)

ich bin mir selber nicht ganz sicher ob es stimmt, was ich da eben erzählt hab, aber auf jeden fall funktionierts mit netscape ^_^

bis denne

der gero

nach obennach unten

Dynamische grafische Buttens und absolute Positionierung mit «DIV»

Die folgende Nachricht zum Thema stammt von: Dietmar an gero, 30. 06. 1999, 22:25

»» Hi...
»» das Problem dabei ist, dass Netscape (ich benutz den IE überhaupt nicht, also keine ahnung ob das folgende auch mit dem ie funktioniert..) für jedes DIV ein neues document anfängt...
»» um mit JavaScript auf das dingen zugreifen zu können, sollte es erst mal eine ID haben:
»» <div id="doof" style="usw..">
»»
»» nun kannst du im script  das document dieser id ansprechen, also
»»
»» window.document.doof.document.images[bildnr]
»»
»» diese info hab ich von http://dhtml.seite.net, die ich bei solchen sachen gerne empfehle ;)
»»
»» ich bin mir selber nicht ganz sicher ob es stimmt, was ich da eben erzählt hab, aber auf jeden fall funktionierts mit netscape ^_^
»»
»» bis denne
»»
»» der gero

Hab ich versucht, geht nicht!
Meldung: "window.document.doof.images has no properties."
Auch mit dem LAYER-Tag geht es nicht.
Irgendwie muß es mit der absoluten Positionierung zusammenhängen.
D

nach obennach unten

Dynamische grafische Buttens und absolute Positionierung mit «DIV»

Die folgende Nachricht zum Thema stammt von: Gero Takke, 30. 06. 1999, 22:28

hi..
ich schrieb
window.document.doof._document_.images
nicht  nur
window.document.doof.images

dann funktionierts..
bye...

nach obennach unten

Dynamische grafische Buttens und absolute Positionierung mit «DIV»

Die folgende Nachricht zum Thema stammt von: Dietmar, 30. 06. 1999, 22:56

»» hi..
»» ich schrieb
»» window.document.doof._document_.images
»» nicht  nur
»» window.document.doof.images
»»
»» dann funktionierts..
»» bye...

Du hast natürlich recht!
Aber vielleicht bin ich ja doof?
Schon wieder die Meldung:window.document.doof.document.images[Bildnr] has no properties.
Jetzt der ganze Code in ursprünglicher Form:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
  <TITLE>M</TITLE>
  <META NAME="generator" CONTENT="WebPage Composer 2">
  </HEAD>
<BODY TEXT="#000000" Background="hinterg.jpg"  LINK="#0000FF" VLINK="#000080" ALINK="#C0C0C0">

          <DIV STYLE="POSITION:ABSOLUTE; TOP:0px; LEFT:0px; WIDTH:570px; Z-INDEX:2">
          <IMG SRC="mgcs_1a.jpg" ALT="mgcs_1.jpg (6'797 Bytes)" BORDER="0" WIDTH="567" HEIGHT="81"></DIV>
          <DIV STYLE="POSITION:ABSOLUTE; TOP:94px; LEFT:165px; WIDTH:458px; Z-INDEX:1">
          <IMG SRC="headlinie.jpg" ALT="headlinie.jpg (1'572 Bytes)" BORDER="0" WIDTH="508" HEIGHT="60"></DIV>
          <DIV STYLE="POSITION:ABSOLUTE; TOP:81px; LEFT:-1px; WIDTH:146px">
          <SPACER TYPE=BLOCK WIDTH="1" HEIGHT="1" ALIGN="LEFT"><IMG SRC="mgcs_2.jpg" ALT="mgcs_2.jpg (686 Bytes)"    
          BORDER="0" WIDTH="146" HEIGHT="49"></DIV>
          
<SCRIPT LANGUAGE="JavaScript">
<!--
Normal1 = new Image();
Normal1.src = "mgcs_3c.gif";
Zeiger1 = new Image();
Zeiger1.src = "mgcs_3cx.gif";
Normal2 = new Image();
Normal2.src = "mgcs_4c.gif";
Zeiger2 = new Image();
Zeiger2.src = "mgcs_4cx.gif";
Normal3 = new Image();
Normal3.src = "mgcs_5c.gif";
Zeiger3 = new Image();
Zeiger3.src = "mgcs_5cx.gif";
Normal4 = new Image();
Normal4.src = "mgcs_6c.gif";
Zeiger4 = new Image();
Zeiger4.src = "mgcs_6cx.gif";
Normal5 = new Image();
Normal5.src = "mgcs_7c.gif";
Zeiger5 = new Image();
Zeiger5.src = "mgcs_7cx.gif";
Normal6 = new Image();
Normal6.src = "mgcs_8c.gif";
Zeiger6 = new Image();
Zeiger6.src = "mgcs_8cx.gif";

function Bildwechsel(Bildnr,Bildobjekt)
{
window.document.images[Bildnr].src=Bildobjekt.src;
}
//-->
</SCRIPT>

<DIV STYLE="POSITION:ABSOLUTE; TOP:130px; LEFT:5px; WIDTH:159px; Z-INDEX:6">
<A HREF="test1.html" onMouseOver="Bildwechsel(3,Zeiger1)" onMouseOut="Bildwechsel(3,Normal1)">
<IMG SRC="mgcs_3c.gif" ALT="mgcs_3c.gif (1'517 Bytes)" BORDER="0" WIDTH="159" HEIGHT="71">
</A></DIV>

<DIV STYLE="POSITION:ABSOLUTE; TOP:185px; LEFT:5px; WIDTH:159px; Z-INDEX:5">
<A HREF="test1.html" onMouseOver="Bildwechsel(4,Zeiger2)" onMouseOut="Bildwechsel(4,Normal2)">
<IMG SRC="mgcs_4c.gif" ALT="mgcs_4c.gif (1'549 Bytes)" BORDER="0" WIDTH="159" HEIGHT="71">
</A></DIV>

<DIV STYLE="POSITION:ABSOLUTE; TOP:240px; LEFT:5px; WIDTH:159px; Z-INDEX:4">
<A HREF="test1.html" onMouseOver="Bildwechsel(5,Zeiger3)" onMouseOut="Bildwechsel(5,Normal3)">
<IMG SRC="mgcs_5c.gif" ALT="mgcs_5c.gif (1'549 Bytes)" BORDER="0" WIDTH="159" HEIGHT="71">
</A></DIV>

<DIV STYLE="POSITION:ABSOLUTE; TOP:295px; LEFT:5px; WIDTH:159px; Z-INDEX:3">
<A HREF="test1.html" onMouseOver="Bildwechsel(6,Zeiger4)" onMouseOut="Bildwechsel(6,Normal4)">
<IMG SRC="mgcs_6c.gif" ALT="mgcs_6c.gif (1'549 Bytes)" BORDER="0" WIDTH="159" HEIGHT="71">
</A></DIV>

<DIV STYLE="POSITION:ABSOLUTE; TOP:350px; LEFT:5px; WIDTH:159px; Z-INDEX:2">
<A HREF="test1.html" onMouseOver="Bildwechsel(7,Zeiger5)" onMouseOut="Bildwechsel(7,Normal5)">
<IMG SRC="mgcs_7c.gif" ALT="mgcs_7c.gif (1'549 Bytes)" BORDER="0" WIDTH="159" HEIGHT="71">
</A></DIV>

<DIV STYLE="POSITION:ABSOLUTE; TOP:405px; LEFT:5px; WIDTH:159px; Z-INDEX:1">
<A HREF="test1.html" onMouseOver="Bildwechsel(8,Zeiger6)" onMouseOut="Bildwechsel(8,Normal6)">
<IMG SRC="mgcs_8c.gif" ALT="mgcs_8c.gif (1'549 Bytes)" BORDER="0" WIDTH="159" HEIGHT="71">
</A></DIV>

</BODY>
</HTML>

nach obennach unten

Dynamische grafische Buttens und absolute Positionierung mit «DIV»

Die folgende Nachricht zum Thema stammt von: Chräcker Heller, 30. 06. 1999, 23:32

Hallo,


durch Ankes Hilfe (Danke nochmals ;-)) bin ich zu folgender definitiv funktionierenden Lösung gekommen. (Diese Version hat den Vorteil, daß sie beim Explorer UND Navigator funktioniert....)


<html>
<head>
<title>Rollover Lösung</title>

<script language="JavaScript">
<!--
Normal1 = new Image();
Normal1.src = "bild1.gif";
Highlight1 = new Image();
Highlight1.src = "bild2.gif";

function Bildwechsel(Divname,Bildnr,Bildobjekt)
{
if (navigator.appName.substring(0,4) == "Nets")
{document[Divname].document.images[0].src = Bildobjekt.src;}
else
{window.document.images[Bildnr].src = Bildobjekt.src;}
}
//-->
</script>
</head>

<body >

<!-- hier kommt das auslösende Bild (der Schalter) //-->

<div style="position:absolute; top:50px; left:40px" >
<a href="testzwei.html" onmouseover="Bildwechsel('austauschbild',1,Highlight1)" onmouseout="Bildwechsel('austauschbild',1,Normal1)">
<img src="ausloesebild.gif" height="27" width="125" border="0"></a>
</div>

<!-- hier kommt das auszutauschende Bild  //-->

<div id="austauschbild" style="position:absolute; top:67px; left:274px" >
<IMG SRC="bild1.gif" HEIGHT="113" WIDTH="84">
</div>

</body>
</html>


--------------
Bei dieser Version ist das auslösende Bild (der Schalter) nicht mit den sich abwechselnden Bildern identisch. Die "normale" version dürfte aber dann nicht das Problem sein...dann muß eben der erste Div-Container den Namen bekommen und die Bildnummer muß angepast werden....

Die Austauschfunktion wurde um eine dritte zu übergebende Variabel erweitert. Landet die Seite im Navigator, ist der Div-name wichtig, die Image-Nummer ist dann immer auf 0 (Vorausgesetzt, man hat auch nur ein Bild im Div.)
Landet die Seite im Explorer, ist die Bildnummer entscheident, der Div-Name wird nicht gebraucht.....


Chräcker

nach obennach unten

Dynamische grafische Buttens und absolute Positionierung mit «DIV»

Die folgende Nachricht zum Thema stammt von: Andreas Bierhals, 01. 07. 1999, 16:56

Hallo,

»» »» hi..
»» »» ich schrieb
»» »» window.document.doof._document_.images
»» »» nicht  nur
»» »» window.document.doof.images
»» »»
»» »» dann funktionierts..
»» »» bye...
»»
»» Du hast natürlich recht!
»» Aber vielleicht bin ich ja doof?
»» Schon wieder die Meldung:window.document.doof.document.images[Bildnr] has no properties.

Auch die untere Schreibweise ist nicht korrekt. Das Rätsels Lösung findet sich in  einer ausfühlichen Form unter ../../sfarchiv/1999_1/t01931.htm#a8793.

Viele Grüße

   Andreas

nach obennach unten

Dynamische grafische Buttens und absolute Positionierung mit «DIV»

Die folgende Nachricht zum Thema stammt von: Joachim, 30. 06. 1999, 22:49

Hallo,
bei NC musst Du so vorgehen:

document.layers["ebene0"].document.images...usw

wobei ebene0 die ID="..." des Div Layers ist. Also, die gesamte Objekt-Hirachie abwaerts, dann geht es.

Gruss  Joachim

nach obennach unten

Dynamische grafische Buttens und absolute Positionierung mit «DIV»

Die folgende Nachricht zum Thema stammt von: Antje Hofmann, 30. 06. 1999, 22:58

Schaue mal in diesen Thread
http://www.teamone.de/selfaktuell/self_forum/22422.html
da wird das Thema komplett behandelt.

Viele Grüße

Antje

nach obennach unten

Dynamische grafische Buttens und absolute Positionierung mit «DIV»

Die folgende Nachricht zum Thema stammt von: Dietmar, 30. 06. 1999, 23:22

»» Schaue mal in diesen Thread
»» http://www.teamone.de/selfaktuell/self_forum/22422.html
»» da wird das Thema komplett behandelt.
»»
»» Viele Grüße
»»
»» Antje

Danke Antje!
Nach erster Durchsicht, ist es wohl doch komplizierter als ich dachte.
Das schaffe ich heute nicht mehr.
Gute Nacht und bis bald
Dietmar

nach oben
Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 1999 Teil von Juni

© 1998-2006 Seite Impressum, Software: Classic Forum