MouseOver (Text u. Bild an unterschiedl. Position)

mammuteffect

mammuteffect

Mitglied
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
 
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>
 
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.
 
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.
 
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!
 
Hi.
JmasterJ hat gesagt.:
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?
Zum Vergrößern anklicken....
Komplett auf jeden Fall ;-)

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: 
<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
 
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
 
Maik!?

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

gruß jan
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück