# MouseOver (Text u. Bild an unterschiedl. Position)



## mammuteffect (10. November 2006)

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. November 2006)

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

Das könnte dann beispielsweise so aussehen:


```
<!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. November 2006)

Und wie erklärst Du dann Deinen Beitrag hier ::: http://www.tutorials.de/forum/html/259154-bilder-galerie-popup-oder-target-_blank.html

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


----------



## Maik (13. November 2006)

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. November 2006)

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


----------



## Maik (13. November 2006)

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. März 2010)

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. März 2010)

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?


Komplett auf jeden Fall ;-)


```
// "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;
}
```


```
<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. März 2010)

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. März 2010)

Maik!?

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

gruß jan


----------



## Quaese (17. März 2010)

Hi,

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

Texte über mehr Zeilen kannst du wie folgt angeben:

```
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. März 2010)

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. März 2010)

Hi,

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

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


----------



## JmasterJ (17. März 2010)

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

Danke für Alles!


----------

