on mouseover problem

montana069 · 31.08.2010

guten tag euch allen,

seit längerem trage ich die idee in mir rum eine hp einzurichten, heute habe ich mich drangesetzt und mir etliche tutorials gefahren.

das sich ein menüpunkt farbig ändert, sobald man mit der maus drüber fährt habe ich bereits mit dem onmouse-over verhalten hinbekommen. jedoch bin ich daran gescheitert so gleichzeitig mein hauptfensterbild zu ändern. mit klicken auf das symbol sollen sich mehrere neue klickbare symbole zeigen.

hoffe hier könnt mein anliegen nachvollziehen.
vielen dank schon im vorraus!

http://www.dreamworker.de/foren/attachment.php?attachmentid=1169&stc=1&d=1283215197

sokie · 31.08.2010

AW: on mouseover problem

montana069 schrieb:
das sich ein menüpunkt farbig ändert, sobald man mit der maus drüber fährt habe ich bereits mit dem onmouse-over verhalten hinbekommen. jedoch bin ich daran gescheitert so gleichzeitig mein hauptfensterbild zu ändern. mit klicken auf das symbol sollen sich mehrere neue klickbare symbole zeigen.

Vermutlich einfacher zu antworten, wenn du uns einfach den code soweit du jetzt bist, und/oder einen Link zur Seite(besser) postest.

montana069 · 31.08.2010

AW: on mouseover problem

hab nen link zu meiner seite angefügt.

vincitore · 31.08.2010

AW: on mouseover problem

das bild bringt auch nicht viel, weil wir nicht wissen wie dein code aussieht

bzw wo ist der link von dir angefügt?

cgerman · 31.08.2010

AW: on mouseover problem

Der Link führt mich nur zu einem Bild?

So köma dir net helfe

Aber evtl kann dir css3 da weiter helfen!

montana069 · 31.08.2010

AW: on mouseover problem

erstmal sry... ich unglaublicher newbee...
nen link zur seite kann ich leider nicht liefern.
aber hier der quelltext.

HTML:

<html>
<head>
<title>HP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('../../hp symbole farbig/Bilder/foto.gif','../../hp symbole farbig/Bilder/HP_13.gif','../../hp symbole farbig/Bilder/HP_15.gif','../../hp symbole farbig/Bilder/arch.gif')">
<!-- Save for Web Slices (HP.psd) -->
<table id="Tabelle_01" width="1024" height="768" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="8">
            <img src="Bilder/HP_01.gif" width="1" height="630" alt=""></td>
        <td>
            <img src="Bilder/logo.gif" width="209" height="191" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/HP_03.gif" width="4" height="195" alt=""></td>
        <td>
            <img src="Bilder/kopfzeile.gif" alt="" name="top" width="810" height="191" id="top"></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/HP_05.gif" width="209" height="4" alt=""></td>
        <td>
            <img src="Bilder/HP_06.gif" width="810" height="4" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">          <div align="left"><img src="Bilder/arch.gif" alt="" name="ARCH1" width="213" height="142" id="Image1" onClick="MM_showHideLayers('top','','show','body','','show')" onMouseOver="MM_swapImage('Image1','','../../hp symbole farbig/Bilder/arch.gif',1)" onMouseOut="MM_swapImgRestore()"></div></td>
        <td rowspan="7">
            <img src="Bilder/hauptfenster-leer.gif" alt="" name="body" width="810" height="573" id="body"></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="Bilder/HP_09.gif" width="213" height="4" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/foto.gif" alt="" width="209" height="141" id="Image2" onMouseOver="MM_swapImage('Image2','','../../hp symbole farbig/Bilder/foto.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
        <td rowspan="5">
            <img src="Bilder/HP_11.gif" width="4" height="427" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/HP_12.gif" width="209" height="4" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/HP_13.gif" alt="" width="209" height="140" id="Image3" onMouseOver="MM_swapImage('Image3','','../../hp symbole farbig/Bilder/HP_13.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/HP_14.gif" width="209" height="4" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="Bilder/HP_15.gif" alt="" width="210" height="138" id="Image4" onMouseOver="MM_swapImage('Image4','','../../hp symbole farbig/Bilder/HP_15.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

das oben angefügte bild sollte meine absicht aufzeigen, mit dem mouseover das hauptfenster (frame?) mit zu wechseln.

sokie · 01.09.2010

AW: on mouseover problem

mein lieber, da hast du uns aber ein bisschen in die irre geführt. Das ist ja nur der Kram, den zB Photoshop erzeugt - alles schön und gut, aber für das was du vorhast ist das nicht nützlich, sondern einfach im Weg.
wenn du etwas in der Richtung schreiben willst, brauchst du als erstes ordentlich strukturierten html code. Den kriegst du nicht aus Photoshop mit dem Slicewerkzeug (und auch nicht mit dem Javascript was schon deutlich in die Jahre gekommen ist).
Was soll man nun raten... vielleicht eher in der Richtung, dass du die symbole, die du ein/ausblenden willst in einer Liste organisierst und per css formatierst. Die javascript-Sache vielleicht mit einerm geeigneten framework wie jQuery erledigen.
Das alles erfordert ein Mass an basiswissen und erfordert auch code selbst zu schreiben (oder zumindest zu verstehen). Du hast dir viel vorgenommen.
im Prinzip sollte das etwas so funktionieren: wenn ich richtig verstanden habe?

montana069 · 01.09.2010

AW: on mouseover problem

tut mir leid für die verwirrung, jetzt merk ich erstmal wie wenig ahnung ich überhaupt habe.
leider sind meine html kenntnisse (kurs 8. klasse) schon längst wieder verflogen, war der annahme das ginge mit dreamweaver mittlerweile per drag and drop, wie auch das wechseln von bildern, wo er den code selbst schreibt.

die seite auf dem link den du gepostet hast zeigt genau mein vorhaben.
nun muss die mass an basiswissen wohl erst in meinen kopf rein, bevor es weitergehen kann...

vielen dank für die aufklärung.