MouseOver (Text u. Bild an unterschiedl. Position) @ tutorials.de: Tutorials, Forum & Hilfe

mammuteffect · 10.11.06 12:41

Ahoi,
habe eine Frage: Ich habe einen Link: Daunter (oder irgendwo anders) soll ein Bild sein, dass sich verändert, wenn man mit der Maus auf den Link geht. Soweit ein relativ leicht zu lösendes Problem: Allerdings wird sowohl Bild als auch Link per PHP aus einer Schleife erzeugt und das, finde ich, macht die Angelegenheit schon schwieriger.

Ich würde es liebend gern mit CSS realisieren, weil ich ungern mit Sachen rumhantiere, von denen ich GAR

keine Ahnung habe (JavaScript ...).
Wenn es allerdings gar nicht anders geht bitte einfach ins entsprechende Forum verschieben.
Danke

Maik · 10.11.06 12:47

Eine Grafik (= img-Element) lässt sich nicht mit CSS tauschen, hierfür benötigst du Javascript.

Das könnte dann beispielsweise so aussehen:

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
 
<script type="text/javascript">
<!--
// Image-Preloader
image1 = new Image();
image1.src = "pic01.jpg";
 
// swapImage
function swapImage(imgName,swapImg) {
        document.images[imgName].src=swapImg;
}
//-->
</script>
 
</head>
<body>
 
<ul>
    <li><a href="#" onmouseover="swapImage('start','pic01.jpg')" onmouseout="swapImage('start','pic00.jpg')">Link</a></li>
</ul>
 
<div id="imageBox">
   <img src="pic00.jpg" alt="" name="start">
</div>
 
</body>
</html>

Eiszwerg · 12.11.06 23:31

Und wie erklärst Du dann Deinen Beitrag hier ::: http://www.tutorials.de/forum/html/2...et-_blank.html

Da passiert genau das. Sofern ich den Inhalt Deines dortigen Links verstanden habe

Maik · 13.11.06 06:19

Auch wenn es den Eindruck erweckt, so wird in Stu Nicholls' CSS-Photo-Galleries kein img-Element gegen ein anderes ausgetauscht, wenn man über einen Link fährt.

Eiszwerg · 13.11.06 09:58

Technisch gesehen nicht, aber für den Betrachter schon. Eventuell würde dem Poster diese Lösung reichen?!

Maik · 13.11.06 12:44

Da der Autor sein Vorhaben nicht detailierter umschrieben hat, bin ich zunächst mal davon ausgegangen, daß beim Überfahren eines Links ein Grafikelement an einer beliebigen Stelle im Dokumentbaum gegen ein anderes Grafikelement ausgetauscht werden soll, und das ist eben mit CSS nicht realisierbar.

JmasterJ · 14.03.10 09:50

Hallo,

ich bin auf dieses Script in diesem Thread gestoßen und würde es gerne einsetzen.

Allerdings möchte ich, wenn ich mit der Maus über ein Bild oder Link gehe, dass in dem Div kein anderes Bild, sondern ein anderer Text angezeigt wird.

Wie müsste man das Script hierfür abändern?

vielen dank!

Maik · 14.03.10 14:52

Hi.

Zitat von JmasterJ

Allerdings möchte ich, wenn ich mit der Maus über ein Bild oder Link gehe, dass in dem Div kein anderes Bild, sondern ein anderer Text angezeigt wird.

Wie müsste man das Script hierfür abändern?

Komplett auf jeden Fall

Code javascript:

// "Textplatzhalter" in txtBox
var Standard = "Standard-Text";
 
// Text-Arrays für txtBox
var arrTxt = new Array();
 
arrTxt[0] = new Object();
arrTxt[0].txt = "Text 1";
arrTxt[1] = new Object();
arrTxt[1].txt = "Text 2";
arrTxt[2] = new Object();
arrTxt[2].txt = "Text 3";
// usw.
//arrTxt[3] = new Object();
//arrTxt[3].txt = "Text 4";
 
// Text tauschen in txtBox
function swapText(intTxt){
  obj = document.getElementById("txtBox");
  if (obj.innerHTML == arrTxt[intTxt].txt){
    obj.innerHTML = Standard;
    }
    else {
    obj.innerHTML = arrTxt[intTxt].txt;
    }
 
  return false;
}

HTML-Code:

<ul>
    <li>
        <a href="#" onmouseover="return swapText(0)" onmouseout="return swapText(0)">Link 1</a>
    </li>
    <li>
        <a href="#" onmouseover="return swapText(1)" onmouseout="return swapText(1)">Link 2</a>
    </li>
    <li>
        <a href="#" onmouseover="return swapText(2)" onmouseout="return swapText(2)">Link 3</a>
    </li>
    <!-- usw. -->
</ul>

<div id="txtBox">Standard-Text</div>

mfg Maik

JmasterJ · 15.03.10 09:05

Boah Maik,

vielen vielen vielen Dank!

Das Script ist der Hammer und genau das was ich gesucht habe

Eine Frage hab ich noch dazu,

meine Texte sind was länger und wenn ich die im Script einfüge und die länger als eine Zeile sind zeigt er mir einen Syntaxfehler.
Kann das Script die Texte alternativ auch aus einer Textdatei einlesen?

lieben gruß,

jan

JmasterJ · 17.03.10 09:03

Maik!?

Bitte hilf mir da nochmal, glaube Du bist da meine einzige Rettung =)

gruß jan

**Quaese** · 17.03.10 09:13

Hi,

ich bin zwar nicht Maik, kann dir aber vielleicht doch helfen.

Texte über mehr Zeilen kannst du wie folgt angeben:

Code :

1 2	arrTxt[0].txt = "Text 1\ in zwei Zeilen";

Textfiles lassen sich mit JavaScript nicht so einfach einbinden. Hier besteht aber die Möglichkeit, Inhalte aus Textdateien mittels Ajax dynamisch nachzuladen. Hierzu solltest du zahlreiche Hilfe im Forum finden.

Ciao
Quaese

JmasterJ · 17.03.10 13:38

Hey Quaese,

danke dafür das ist schon eigentlich ausreichend für meine Zwecke.

Allerdings wollte ich auch noch Hyperlinks in den Text machen,
das geht aber wahrscheinlich nicht weil das Array nur Textobjekte speichert, hab ich recht?

gruß

**Quaese** · 17.03.10 15:13

Hi,

wenn du die Anführungszeichen maskierst, sollte das kein Problem darstellen:

Code :

1 2	arrTxt[0].txt = "Text 1\ in zwei <a href=\"seite.html\">Zeilen</a>";

Ciao
Quaese

JmasterJ · 17.03.10 16:15

Perfekt, dann hab ich echt alles was ich brauche jetzt!

Danke für Alles!

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

ein mouseover Bild genau in einem Text plazieren

Bild erst verdunkeln, Mouseover-Bild normal+eine Art Popup?

kleines bild -mouseover- bild groß

Text auf einem Bild an einer Bestimmten Position positionieren

Position vom Text

E-Mail:

Abonnieren Abbestellen