 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
melomelone
Threadersteller
Dabei seit: 28.11.2005
Ort: -
Alter: 46
Geschlecht: -
|
Verfasst Mo 14.01.2013 13:18
Titel roll over madness |
  |
|
Hallo, ich habe ein Problem mit einem Projekt
Hier ein Link zum Projekt http://bjoernschmitz.com/test/koepfe.html
Ich möchte das wenn ich die Bildbereiche verlassen wieder alles auf Anfang geht. Blöderweise bleibt das eine Bild immer stecken und ich weiss nicht woran es liegt. Hat jemand eine Idee oder kann mir sagen wo ich im Code etwas ändern muss.
| Code: |
<style type="text/css">td img {display: block;}</style>
<script language="JavaScript1.2" type="text/javascript">
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_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_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
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];}}
}
//-->
</script>
</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('Bilder/koepfe_r1_c1_s2.png','Bilder/koepfe_r1_c2_s2.png','Bilder/koepfe_r1_c2_s4.png','Bilder/koepfe_r1_c1_s4.png','Bilder/koepfe_r1_c2_s3.png','Bilder/koepfe_r1_c1_s3.png','Bilder/koepfe_r1_c1_s5.png','Bilder/koepfe_r1_c2_s5.png');">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="1168">
<!-- fwtable fwsrc="Vainiac_logo_2013_2_koepfe2.png" fwpage="Seite 1" fwbase="koepfe.png" fwstyle="Dreamweaver" fwdocid = "2109022876" fwnested="0" -->
<tr>
<td><img src="Bilder/spacer.gif" width="614" height="1" border="0" alt="" /></td>
<td><img src="Bilder/spacer.gif" width="554" height="1" border="0" alt="" /></td>
<td><img src="Bilder/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore();MM_nbGroup('out');" onmouseover="MM_nbGroup('over','koepfe_r1_c1_s1','Bilder/koepfe_r1_c1_s2.png','',1);MM_swapImage('koepfe_r1_c2_s1','','Bilder/koepfe_r1_c2_s2.png',1);" onclick="MM_nbGroup('down','navbar1','koepfe_r1_c2_s1','Bilder/koepfe_r1_c2_s4.png',1);MM_swapImage('koepfe_r1_c1_s1','','Bilder/koepfe_r1_c1_s4.png',1);"><img name="koepfe_r1_c1_s1" src="Bilder/koepfe_r1_c1_s1.png" width="614" height="681" border="0" id="koepfe_r1_c1_s1" alt="" /></a></td>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore();MM_nbGroup('out');" onmouseover="MM_nbGroup('over','koepfe_r1_c2_s1','Bilder/koepfe_r1_c2_s3.png','',1);MM_swapImage('koepfe_r1_c1_s1','','Bilder/koepfe_r1_c1_s3.png',1);" onclick="MM_nbGroup('down','navbar1','koepfe_r1_c1_s1','Bilder/koepfe_r1_c1_s5.png',1);MM_swapImage('koepfe_r1_c2_s1','','Bilder/koepfe_r1_c2_s5.png',1);"><img name="koepfe_r1_c2_s1" src="Bilder/koepfe_r1_c2_s1.png" width="554" height="681" border="0" id="koepfe_r1_c2_s1" alt="" /></a></td>
<td><img src="Bilder/spacer.gif" width="1" height="681" border="0" alt="" /></td>
</tr>
</table>
|
|
|
| |
  |
 |
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht: 
|
Verfasst Mo 14.01.2013 14:28
Titel
|
|
|
Dein Code ist wirklich gruselig. Fireworks kann dir die Arbeit nicht abnehmen selber HTML, CSS und JS zu lernen.
Allerdings: Das Ganze vorhaben geht auch ohne JS nur mit CSS.
Mal ein Beispiel auf die Schnelle wie es funktionieren könnte ... geht bestimmt noch eleganter: http://jsfiddle.net/5F9qH/
Gruß
Karl
|
|
| |
|
|
|
Anzeige
|
|
|
melomelone
Threadersteller
Dabei seit: 28.11.2005
Ort: -
Alter: 46
Geschlecht: -
|
Verfasst Mo 14.01.2013 14:45
Titel
|
|
|
|
und statt Farben und Größen kann ich dann Bilder zuweisen?
|
|
| |
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
Verfasst Mo 14.01.2013 14:47
Titel
|
|
|
| melomelone hat geschrieben: | | und statt Farben und Größen kann ich dann Bilder zuweisen? |
Sobald du CSS verstehst, ja.
Gruß
Karl
|
|
| |
|
|
melomelone
Threadersteller
Dabei seit: 28.11.2005
Ort: -
Alter: 46
Geschlecht: -
|
Verfasst Mo 14.01.2013 15:25
Titel
|
|
|
|
danke,ich probiermal was aus
|
|
| |
|
|
melomelone
Threadersteller
Dabei seit: 28.11.2005
Ort: -
Alter: 46
Geschlecht: -
|
Verfasst Mo 14.01.2013 17:50
Titel
|
|
|
jetzt habe ich eine gute Methode gefunden, aber es funktioniert nicht 
Das Bild wird nicht geladen/angezeigt!
Um es einfach zu halten habe ich alle Datein im selben Ordner liegen.
| Code: |
.foto-link
{
width: 584px;
height: 681px;
border:1px solid red;
display: block;
margin: 0 auto;
}
.foto1
{
background-image: url(basti.png) no-repeat;
}
.foto-link:hover
{
background-position: 0 -190px;
}
|
html
| Code: |
<html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>
<a href="#" class="foto-link foto1"></a>
</body>
</html>
|
Zuletzt bearbeitet von melomelone am Mo 14.01.2013 17:51, insgesamt 1-mal bearbeitet
|
|
| |
|
|
DEKONSTRUKTIV
Dabei seit: 22.06.2009
Ort: bln
Alter: -
Geschlecht: -
|
Verfasst Mo 14.01.2013 18:06
Titel
|
|
|
| melomelone hat geschrieben: | | jetzt habe ich eine gute Methode gefunden, aber es funktioniert nicht |
brillante methode.
|
|
| |
 |
|
melomelone
Threadersteller
Dabei seit: 28.11.2005
Ort: -
Alter: 46
Geschlecht: -
|
Verfasst Mo 14.01.2013 18:13
Titel
|
|
|
aber irgendwo ist der wurm drin. Mein Bild wird nicht angezeigt!
/Nachtrag:
.png ging nicht .jpg geht
komisch oder?
Zuletzt bearbeitet von Nimroy am Mo 14.01.2013 18:24, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
