Skripte(PHP,ASP,Perl...)

Bildwechsel mit Textlayer

Diskussionsgruppen
Betriebsysteme: Windows 7; WindowsVista; WindowsXP; Linux; BS-Sonstige
Software: Textverarbeitung; Tabellenkalkulation; Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; E-Mail/Outlook; Internet Browser; SW-Sonstige
Hardware: Mainboard/CPU/RAM; Grafikkarten; Peripherie; HW Sonstiges
Netzwerk: DSL; W-Lan; Telekommunikation; NW-Sonstiges
Programmierung: Skripte(PHP,ASP,Perl...); Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke

Frage

Hallo, kennt jemand vielleicht ein Script, mit dem man einen onmousover Bildwechsel und gleichzeitig einen Textlayer einblenden kann? Gruß

Antwort 1 von rfb

ja, klar können wir sowas zusammenbasteln, aber kannst du bitte erst einmal präzisieren, was du willst (z.B. was verstehst du unter einem "Textlayer" und wo soll der "eingeblendet" werden?) und wieweit deine eigenen (Er)kenntnisse und Seitengestaltung sind.

Antwort 2 von bravo

ich möchte bei mouseover auf einen bildlink einen textleyer auf der linken seite, gleichzeitig soll auch ein bildwechsel stattfinden ,wenn man auf den bildlink mit der mouse drüber fährt bis jetzt sieht es so:
<script language="Javascript">
<!--
//onmouseover Textlayer
var stringrep, i=0, v;
function init() {
for (i=0; i<=document.all.length-1;++i){
stringrep=document.all;
if (stringrep.tagName=="DIV"){
if (stringrep.id=="text0"){
stringrep.className="boxshow";
}else{
stringrep.className="boxhide";
}
}
}
}
function expandtext(divid) {
for (i=0; i<=document.all.length-1; ++i){
stringrep=document.all;
if (stringrep.tagName=="DIV"){
if (stringrep.id==divid) {
stringrep.className="boxshow";
}else{
stringrep.className="boxhide";
}
}
}
}
function contracttext() {
for (i=0; i<=document.all.length-1; ++i){
stringrep=document.all;
if (stringrep.tagName=="DIV"){
if (stringrep.id=="text0"){
stringrep.className="boxshow";
}else{
stringrep.className="boxhide";
}
}
}
}
</head>

<body onload="init()">

<a href="javascript:Oplog ()">
<img border="0" src="Image/Oplog_1.jpg" alt="mehr Infos hier..."
onmouseover="expandtext (´text1´)" onmouseout="contracttext()" border="0" width="145" height="100"></td>

<td width="33%" height="120" bgcolor="#000080">
<p align="center">
<a href="javascript:ZES ()">
<img border="0" src="Image/ZE_1.jpg" alt="mehr Infos hier..."
onmouseover="expandtext (´text2´)" onmouseout="contracttext()" width="145" height="100"></td>

<td width="33%" height="120" bgcolor="#000080">
<p align="center">
<a href="javascript:SPS ()">
<img src="Image/S1.jpg" alt="mehr Infos hier..."
onmouseover="expandtext (´text3´)" onmouseout="contracttext()" border="0" width="145" height="100"></td>
</tr>
<tr>
<td width="33%" height="120" bgcolor="#000080" >
<p align="center">
<a href="javascript:PPS ()">
<img src="Image/PPS_1.jpg" alt="mehr Infos hier..."
onmouseover="expandtext (´text4´)" onmouseout="contracttext()" border="0" width="145" height="100"></td>

<td width="33%" height="120" bgcolor="#000080">
<p align="center">
<a target="_blank" href="http://www.awa2000.de" >
<img border="0" src="Image/AW_1.jpg" alt="mehr Infos hier..."
onmouseover="expandtext (´text5´)" onmouseout="contracttext()" border="0" width="145" height="100"></a></td>
</td>

<td width="33%" height="120" bgcolor="#000080" >
<p align="center">
<a href="javascript:PV()">
<img src="Image/PV_1.jpg" alt="mehr Infos hier..."
onmouseover="expandtext (´text6´)" onmouseout="contracttext()" border="0" width="145" height="100"></td>
</tr>
</table>

<div id="text1">
bla bla</div>

<div id="text2">
bla bla</div>

<div id="text3">
bla bla
</div>

<div id="text4">
bla bla</div>

<div id="text5">
bla bla</div>

<div id="text6">
bla bla </div>

Antwort 3 von rfb

ich hoffe, die zahlreichen HTML-Fehler im Quelltext liegen daran, dass du nur einen Ausschnitt hier reinkopiert hast.

Über dein veraltetes JavaScript muss ich erst mal nachdenken, was da gemacht wird. Mal abgesehen davon, dass "document.all" kein JavaScript-Standart ist (und daher nicht von allen Browsern verstanden wird), erscheinen mir die Schleifen durch alle divs um nur eins zu ändern doch recht umständlich.
Soweit zur ersten Analyse. Sinnvoll wäre vielleicht zu wissen, was du im CSS mit "boxshow" und "boxhide" definiert hast (zur Not kann ichs mir aber auch zusammenreimen ;-).
Bis demnächst.

Antwort 4 von rfb

im head:

<style type="text/css">
<!--
a img {border:0 none;}
.beschreibung {display:none; width:...; height:...; ...}
-->
</style>
<script type="text/javascript">
<!-- 
bild0 = new Array("","Image/Oplog_1.jpg","Image/ZE_1.jpg",...);
bild1 = new Array("","Image/Alternativ-Oplog_1.jpg","Image/Alternativ-ZE_1.jpg",...);
function wechsel(was,flag) {
document.getElementById("text"+was).style.display = (flag==1) ? "block" : "none";
document.images["bild"+was].src = (flag==1) ? bild1[was] : bild0[was];
}
//-->
</script>

im body sehen die Aufrufe so aus


<a href="javascript:Oplog ()"> <img src="Image/Oplog_1.jpg" name="bild1" alt="mehr Infos hier..." onmouseover="wechsel(1,1)" onmouseout="wechsel(1,0)" width="145" height="100"></a> 
...
<a href="javascript:ZES ()"><img src="Image/ZE_1.jpg" name="bild2" alt="mehr Infos hier..." onmouseover="wechsel(2,1)" onmouseout="wechsel(2,0)" width="145" height="100"></a> 
...
<div id="text0">bla bla</div>
<div id="text1" class="beschreibung">bla bla</div> 
<div id="text2" class="beschreibung">bla bla</div>

in die beiden Arrays gibst du die Pfade zu den Bildern ein, die gegeneinander ausgetauscht werden sollen. Die paar Zeilen Stylesheet ersetzen u.a. die Funktion init() und die Angabe border=0 bei den Bildern, zu ergänzen sind noch in .beschreibung die Daten zur Positionierung und Größe (steht vermutlich bei dir in ".boxshow"). Die zueinandergehörigen divs und Bilder haben bei name und id jeweils die gleiche Nr.