Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2007 Teil von Juni

SELFHTML Forumsarchiv
zwei überlagernde Bilder

Informationsseite
  1. Seite (JAVASCRIPT) zwei überlagernde Bilder von Frank, 29. 06. 2007, 17:09
nach unten

zwei überlagernde Bilder

Die folgende Nachricht zum Thema stammt von: Frank, 29. 06. 2007, 17:09

Hallo zusammen,
ich möchte vorab sagen,dass ich noch nicht so viel Erfahrung habe mit html,javascript usw. aber ich bin festen Willens ein Projekt
zu realisieren und hoffe auf eure Hilfe.Was ich vor habe,gibt es schon,aber ich weiss nicht wie es gemacht wurde.Schaut es euch am besten einmal an.

http://www.eunos.com/keith/stripes/machine/java/index.html

Ich kann zwar verschiedene Bilder aus einer Liste auswählen,aber
es scheitert bei zwei überlagernden Bildern die getrennt auswählbar
sind,sprich Farbe Auto,Farbe Streifen.

nach obennach unten

zwei überlagernde Bilder

Die folgende Nachricht zum Thema stammt von: glan, 29. 06. 2007, 17:32

Hallo,
so wie ich dich verstanden habe, willst du mit Javascript so was ähnliches wie auf der Seite, auf die du verlinkt hast, machen willst?

Dir ist schon klar, dass Java und JavaScript was völlig verschiedenes sind?

Ein bisschen Quellcode wäre schön... :-)

MfG

nach obennach unten

zwei überlagernde Bilder

Die folgende Nachricht zum Thema stammt von: Frank, 29. 06. 2007, 19:05

»» Hallo,
»» so wie ich dich verstanden habe, willst du mit Javascript so was ähnliches wie auf der Seite, auf die du verlinkt hast, machen willst?

Ich möchte sogar genau das gleiche machen(-:

»» Dir ist schon klar, dass Java und JavaScript was völlig verschiedenes sind?

***öhh rotwerd nöö***

»» Ein bisschen Quellcode wäre schön... :-)

Wie gesagt soweit das ich verschiedene Bilder(farbige Autos)
aufrufen kann bin ich.Nur habe ich noch garkeinen Ansatz wie
ich die Streifen in das gleiche Bild bekomme.


»» MfG

nach obennach unten

zwei überlagernde Bilder

Die folgende Nachricht zum Thema stammt von: Patrick, 29. 06. 2007, 19:33

»» »» Hallo,
»» »» so wie ich dich verstanden habe, willst du mit Javascript so was ähnliches wie auf der Seite, auf die du verlinkt hast, machen willst?
»»
»» Ich möchte sogar genau das gleiche machen(-:

ZoomZoom!  :-)


»» Wie gesagt soweit das ich verschiedene Bilder(farbige Autos)
»» aufrufen kann bin ich.Nur habe ich noch garkeinen Ansatz wie
»» ich die Streifen in das gleiche Bild bekomme.

Anders als in der Beispiellösung (Java...) sollte sich so etwas doch tatsächlich mit Javascript, CSS (z-index) und einem transparenten Streifenbild lösen lassen... Wobei der IE nicht alle Bilder (PNG?) transparent darstellt, die FF ordnungsgemäß transparent zeigt.

nach obennach unten

zwei überlagernde Bilder

Die folgende Nachricht zum Thema stammt von: wucher wichtel, 29. 06. 2007, 19:45

Hallo!

»» Wobei der IE nicht alle Bilder (PNG?) transparent darstellt, die FF ordnungsgemäß transparent zeigt.

Der 7er AFAIK schon. Und für den 6er gibt's auch Lösungen.

ciao, ww

--
Schäuble:
  "Wir können alles. Außer Rechtsstaat."

nach obennach unten

zwei überlagernde Bilder

Die folgende Nachricht zum Thema stammt von: Frank, 29. 06. 2007, 20:45

Super! danke für den Tipp.Teiltransparenz mit opacity funktioniert
genau wie ich es mir vorgestellt habe.Zumindest sieht das statische Bild so aus wie ich es wollte.

Jetz muss ich aber noch eine Lösung finden,wie ich mehrere Voder-und
Hintergrundbilder getrennt von einander in einer Liste aufrufen kann.



»» Hallo!
»»
»» »» Wobei der IE nicht alle Bilder (PNG?) transparent darstellt, die FF ordnungsgemäß transparent zeigt.
»»
»» Der 7er AFAIK schon. Und für den 6er gibt's auch Lösungen.
»»
»» ciao, ww
»»

nach obennach unten

zwei überlagernde Bilder

Die folgende Nachricht zum Thema stammt von: wucher wichtel, 30. 06. 2007, 08:22

Hallo!

»» Jetz muss ich aber noch eine Lösung finden,wie ich mehrere Voder-und
»» Hintergrundbilder getrennt von einander in einer Liste aufrufen kann.

Du musst herausfinden, ob ein bestimmter Eintrag selektiert wurde. Darauf tauscht du dann das Bild gegen das richtige aus.

ciao, ww

--
Schäuble:
  "Wir können alles. Außer Rechtsstaat."

nach obennach unten

zwei überlagernde Bilder

Die folgende Nachricht zum Thema stammt von: Frank, 03. 07. 2007, 07:57

Ich habe jetzt ein paar Tage einiges probiert,aber ich komme nicht weiter.Ich bin jetzt soweit,dass es bei dem ersten Bild funktioniert.Da lassen sich die darüber gelagerten gif`s tauschen.
Sobald ich aber das untere Bild wechsel,sind die gif´s darüber wieder verdeckt.Es scheintso,dass die unten liegenden Bilder nicht getauscht sondern oben drauf gelegt werden.

»» Du musst herausfinden, ob ein bestimmter Eintrag selektiert wurde. Darauf tauscht du dann das Bild gegen das richtige aus.
»»
»» ciao, ww
»»

nach obennach unten

zwei überlagernde Bilder

Die folgende Nachricht zum Thema stammt von: wucher wichtel, 03. 07. 2007, 11:55

Hallo!

»» Ich habe jetzt ein paar Tage einiges probiert,aber ich komme nicht weiter.Ich bin jetzt soweit,dass es bei dem ersten Bild funktioniert.Da lassen sich die darüber gelagerten gif`s tauschen.
»» Sobald ich aber das untere Bild wechsel,sind die gif´s darüber wieder verdeckt.Es scheintso,dass die unten liegenden Bilder nicht getauscht sondern oben drauf gelegt werden.

Zeige Code. Poste einen Link. Dann sehen wir weiter.

ciao, ww

--
Schäuble:
  "Wir können alles. Außer Rechtsstaat."

nach obennach unten

zwei überlagernde Bilder

Die folgende Nachricht zum Thema stammt von: Frank, 03. 07. 2007, 16:36

Hi,eventuell ist es völliger murgs,abber besser habe ich es nicht
hin bekommen.Die oben liegenden gif´s sind übrigens ausgeschnitten und haben einen transparenten Hintergrund.Wie gesagt,ich würde gerne beide Ebenen getrennt won einander auswählen können ohne das etwas verdeckt wird.

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>



<style type="text/css">
<!--
a {
font-family:verdana,arial,helvetica;
font-size:10px;
font-weight:normal;
text-decoration:none;
color: #0050A0;
text-transform: uppercase;
}
a:hover {
color:#FF0099;
}
a:visited {
color:#0050A0;
}
td {
font-family:verdana,arial,helvetica;
font-size:12px;
font-weight:normal;
text-decoration:none;
color: #000000;
}
p {
font-family:verdana,arial,helvetica;
font-size:12px;
font-weight:normal;
text-decoration:none;
color: #000000;
}
ol {
font-family:verdana,arial,helvetica;
font-size:12px;
font-weight:normal;
text-decoration:none;
color: #000000;
}
li {
font-family:verdana,arial,helvetica;
font-size:12px;
font-weight:normal;
text-decoration:none;
color: #003080;
}
pre {
font-family: monospace;
color: #0000FF;
}
#Layer1 {
 position:absolute;
 width:600px;
 height:450px;
 z-index:1;
 left: 171px;
 top: 46px;
}
#Layer2 {
 position:absolute;
 width:709px;
 height:485px;
 z-index:1;
 top: 100px;
 left: 115px;
}
-->
</style>


<script type="text/javascript" language="JavaScript">
<!-- Begin
function zeigeBild(sel) {
document.bild unten.src = "" + sel.options[sel.selectedIndex].value;
}
function zeigeBild(sel) {
document.bild oben.src = "" + sel.options[sel.selectedIndex].value;
}

//  End -->
</script>
</head>
<body>

<div align="center">
  <form name="bildwahl">
    <div id="Layer2"><img name="bild unten" src="Bild unten 1.jpg" width="600" height="450" border="1"></div>

    <div align="left">
<select name="selbox" size=1 onChange="zeigeBild(this)">
          <option value="Bild unten 1.jpg">rot
    <option value="Bild unten 2.jpg">blau
          <option value="Bild unten 3.jpg">gelb
 </select></form>
</div>


<form name="bildwahl">
<div id="Layer2"><img name="bild oben"src="Bild oben schwarz.gif" width="600" height="450" border="1"></div>
 <div align="left">
        <select name="selbox" size=1 onChange="zeigeBild(this)">
       <option value="Bild oben schwarz.gif">Streifen schwarz
          <option value="Bild oben weiss.gif">Streifen weiss

 </select></form>
<br>

<br><br>
</td></tr></table>



</body></html>



»» Zeige Code. Poste einen Link. Dann sehen wir weiter.
»»
»» ciao, ww
»»

nach obennach unten

zwei überlagernde Bilder

Die folgende Nachricht zum Thema stammt von: wucher wichtel, 03. 07. 2007, 17:56

Hallo!

»» document.bild unten

Ich bin mir nicht so ganz sicher, ob das totaler Quatsch ist, oder nicht. Aber benütze lieber Unterstriche (_) als Leerzeichen.

Weiterhin fällt mir auf:

function zeigeBild(sel) {
  document.bild unten.src = "" + sel.options[sel.selectedIndex].value;
}
function zeigeBild(sel) {
  document.bild oben.src = "" + sel.options[sel.selectedIndex].value;
}

Welche Funktion soll jetzt von JavaScript ausgewählt werden? Du hast ja für beide den gleichen Namen gewählt. Nenne die Funktionen lieber zeigeBild_unten und zeigeBild_oben.

Außerdem ist soetwas nicht schlimm, aber sinnfrei.

"" + sel.options[sel.selectedIndex].value;

Du kannst einfach die Anführungszeichen und das Pluszeichen weglassen.

ciao, ww

--
Schäuble:
  "Wir können alles. Außer Rechtsstaat."

nach obennach unten

zwei überlagernde Bilder

Die folgende Nachricht zum Thema stammt von: Frank, 03. 07. 2007, 19:24

Super!!! nun funktioniert es.
Da ich zunächst nur ein Auswahlfenster hatte,habe ich die Funktion einfach kopiert.Ich dachte,dass die Unterscheidung in der Klammer statt findet {document.bild_unten.src = sel.option[sel.selectedIndex].value;} und hatte nur dort umbenannt.

Ich danke dir vielmals für deine Hilfe,sont hätte ich es nicht
auf die Reihe bekommen.

nach obennach unten

zwei überlagernde Bilder

Die folgende Nachricht zum Thema stammt von: wucher wichtel, 29. 06. 2007, 19:43

Hallo!

»» »» Dir ist schon klar, dass Java und JavaScript was völlig verschiedenes sind?
»»
»» ***öhh rotwerd nöö***

Java und JavaScript. Die haben außer den ersten 4 Buchstaben nichts gemeinsam.

»» Nur habe ich noch garkeinen Ansatz wie ich die Streifen in das gleiche Bild bekomme.

Du könntest ein teiltransparentes Bild über die Autos legen. Die Streifen sind nicht durchsichtig. Der Rest schon, sonst sieht man ja das Auto nicht mehr ;-)

ciao, ww

--
Schäuble:
  "Wir können alles. Außer Rechtsstaat."

nach obennach unten

zwei überlagernde Bilder

Die folgende Nachricht zum Thema stammt von: loreleyschiffer, 29. 06. 2007, 18:14

»»
»» http://www.eunos.com/keith/stripes/machine/java/index.html
»»

There's a funny little "feature" of Internet Explorer.

Sorry, ich würde ja gerne helfen, aber ich kann die "IE-Features" im Firefox unter Linux leider nicht sehen (Java habe ich installiert, hilft aber nichts). :-(
Eine genauere Beschreibung deines Vorhabens wäre schon schön. Vielleicht gibt es ja auch eine Browserübergreifende Lösung?

 

nach obennach unten

zwei überlagernde Bilder

Die folgende Nachricht zum Thema stammt von: Frank, 29. 06. 2007, 18:56

Ok ich versuch es zu beschreiben.Stell dir vor du hättest einen roten PKW und du würdest gerne wissen wie dieser in blau,gelb oder grün aussieht.Das möchte ich als Simulator erstellen.Es soll ein Bild von einem PKW zu sehen sein und darunter ein Auswahlmenü für die farben.Je nach auswahl soll der PKW in der entsprechenden Farbe dargestellt werden.Soweit habe ich es geschafft.Aber nun sollen in dem gleichen Bild,auf dem PKW auch noch farbige Streifen dargestellt
werden,die ebenfalls auswählbar sein sollen.Meine Idee war zwei Bilder übereinander legen.Unten das Auto,darüber die Streifen.Es wird bei meinem Versuch aber immer ein Bild verdeckt,obwohl die Streifen einen transparenten Hintergrund haben.


»» »»
»» »» http://www.eunos.com/keith/stripes/machine/java/index.html
»» »»
»»
»» There's a funny little "feature" of Internet Explorer.
»»
»» Sorry, ich würde ja gerne helfen, aber ich kann die "IE-Features" im Firefox unter Linux leider nicht sehen (Java habe ich installiert, hilft aber nichts). :-(
»» Eine genauere Beschreibung deines Vorhabens wäre schon schön. Vielleicht gibt es ja auch eine Browserübergreifende Lösung?
»»
»»

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

© 1998-2006 Seite Impressum, Software: Classic Forum