Willkommen auf dem Portal für Mediengestalter

mitami · Threadersteller

Folgende Aufgabe: (JavaScript)
Platzieren Sie das Bild Hand mittig auf einer Webseite. Es zeigt eine Hand, die einen Würfel hält. Bringen Sie nun unterhalb des Bildes 30 kleine quadratische Divider (25x25px) an, und weisen Sie diesen per CSS eine Hintergrundfarbe zu. Insgesamt sollen sie einen Farbverlauf ergeben. Bewegt ein Anwender die Maus von links nach rechts über den Farbverlauf, so soll sich der Würfel drehen. (Es existieren genau 30 Bilder, die jeweils einen Bewegungsfortschritt zeigen)

Wie ghe ich richtig an die Sache heran? Ich habe erst ein Tutorial bearbeitet, wo man Glühlampen zum leuchten gebracht hat (onmouse-effekt). Bei diesem komm ich aber überhaupt nicht weiter!

rob · **Verfasst** Do 01.03.2007 20:14 **Titel**

wo genau liegt denn dein problem?

mitami · Threadersteller

Das Bild kann ich natürlich platzieren und die 30 div auch aber ich weiß ehrlich gesagt nicht, wie ich die einfach in JavaScript schreiben lassen kann * Keine Ahnung... *

Das mit dem onmouseover bekomm ich dann schon hin, ich weiß zumindest, dass ich das direkt oben mit rein schreiben kann, so dass ich im body an sich, ausser dem img-tag nichts drin stehen haben muss. Den Style für die div´s muss ich auch irgendwie mit in das Script verpacken *hu hu huu*

mitami · Threadersteller

Momentan sieht mein script so aus:

<script language="JavaScript" type="text/javascript">
var maxbilder = 30;
var aktuellesbild = 1;
var bildname = "hand/1.png";
function bewegdasbild() {
document.all(bildname).src = aktuellesbild+".png";
aktuellesbild = aktuellesbild + 1;
if (aktuellesbild>maxbilder) {
aktuellesbild = 1;
}
}
</script>

schachbrett · **Verfasst** Fr 02.03.2007 11:27 **Titel**

mitami · Threadersteller

Oh jeh!!!!

Ich werf nur noch mit Fragezeichen um mich!!!

Ich muss doch dann den einzelnen "boxen (1-30)" den onmouseover zuweisen, der dann jeweils das nächste Bild des Würfels öffnet.

schachbrett · **Verfasst** Fr 02.03.2007 12:46 **Titel**

Keine Panik! Schnapp dir mal nen Kaffee und lies den Code in Ruhe durch. Danach kannst du ja Fragen stellen Lächel

Schau dir die Datei auch im Browser an + benenne deine Wuerfel-Bilder box1.jpg, box2.jpg, box3.jpg...

mitami · Threadersteller

Tut mir leid, ich raff es nicht!

<html>
<head>
<title>myBox</title>

<style type="text/css">
a span { display: block; width: 25px; height: 25px; }
#box1 span { background-color: #f00; }
#box2 span { background-color: #e01; }
#box3 span { background-color: #d02; }
/* ... */
</style>

<script type="text/javascript">
mybox = function(el) {
var pictureSrc = el.getAttribute('id') + ".png";
document.getElementById('1').src = pictureSrc;
}
</script>

</head>

<body>
<img id="box" src="1.png" alt="box" />

<a href="#" onmouseover="mybox(this)" id="box1"><span></span></a>
<a href="#" onmouseover="mybox(this)" id="box2"><span></span></a>
<a href="#" onmouseover="mybox(this)" id="box3"><span></span></a>
...

</body>
</html>

Ich hab doch 30 div´s und dazu 30 Bilder, die sich dann ändern sollen, wenn ich über die div´s mit der maus fahre. Die Bilder hab ich wie in der Übung mit 1.png benannt, so wie sie auch im Ordner liegen. Ich muss dem doch sagen, dass er immer das nächste dann öffnen soll, sobald ich weiter nach unten bzw. nach links oder rechts fahre.

Willkommen auf dem Portal für Mediengestalter

Thema: Wie erreiche ich diese Funktion? vom 01.03.2007

Wie erreiche ich diese Funktion?