Avatar billede henrik20 Nybegynder
21. januar 2006 - 09:19 Der er 4 kommentarer og
1 løsning

swap image behavior / a: hover for undermenuer i pop-up menuer

Hey

Jeg er ikke klar over om det her spørgsmål ligger i det rigtigt forum, men nu prøver jeg.

Jeg kunne godt tænke mig at vide om det er muligt at tilføje en swap image behavior til forskellige undermenuer i den sammme menu.

jeg har lavet en udgave af menuen i dreamweaver, det vil sige en javascript baseret en af slagsen. og en udgave af menuen fireworks 8, det vil sige med en kombination af css of javascript.

Men det er ikke lykkedes mig at tilføje en swap image behavior eller noget tilsvarende til undermenuerne i nogle af dem. jeg er jo som sagt heller ikke sikker på om det er muligt.

det er ikke noget problem at styre baggrundsbilleder i undermenuerne, især i den menu der er lavet i fireworks. problemet er at swap image behavior / a:hover for menuen gælder for samtlige undermenuer og ikke hver enkelt. jeg har prøvet at til forkellige a: hover til de classes der styrer indholdet af undermenuerne uden held, eller måske på den forkerte måde.

tænkte om problemet ligger i javascript maskinen til menuen?

VH
Henrik
Avatar billede henrik20 Nybegynder
21. januar 2006 - 09:20 #1
html for menuen i fireworks ser sådan her ud:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>produkter_pop_up.gif</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Fireworks 8 Dreamweaver 8 target.  Created Fri Jan 20 12:14:07 GMT+0100 2006-->
<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_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>
<script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>
<style type="text/css" media="screen">
    @import url("./produkter_pop_up.css");
</style>
<link href="produkter_pop_up.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('../frisør4/img/produkter_on.gif')">
<div id="FWTableContainer67307369"> <a href="java script:;" onmouseout="MM_swapImgRestore();MM_menuStartTimeout(500)" onmouseover="MM_menuShowMenu('MMMenuContainer0120121143_0', 'MMMenu0120121143_0',-1,20,'produkter_pop_up');MM_swapImage('produkter_pop_up','','../frisør4/img/produkter_on.gif',1);"><img name="produkter_pop_up" src="produkter_pop_up.gif" width="128" height="20" border="0" id="produkter_pop_up" alt="" /></a>
    <div id="MMMenuContainer0120121143_0">
      <div id="MMMenu0120121143_0" onmouseout="MM_menuStartTimeout(500);" onmouseover="MM_menuResetTimeout();">
     
      <a href="java script:;" id="MMMenu0120121143_0_Item_0" class="MMMIFVStyleMMMenu0120121143_0" onmouseover="MM_menuOverMenuItem('MMMenu0120121143_0');"></a>
     
      <a href="java script:;" name="MMMenu0120121143_0_Item_1" class="MMMIVStyleMMMenu0120121143_0" id="MMMenu0120121143_0_Item_1" onmouseover="MM_menuOverMenuItem('MMMenu0120121143_0')"></a> </div>
    </div>
</div>
</body>
</html>
Avatar billede henrik20 Nybegynder
21. januar 2006 - 09:22 #2
style sheet der linkes til i html koder ser således ud:

td img {
/* Another Mozilla/Netscape bug with making sure our images display correctly */
    display: block;
}

#FWTableContainer67307369 {
/* The master div to make sure that our popup menus get aligned correctly.  Be careful when playing with this one. */
    position:relative;
    margin:0px;
    width:128px;
    height:20px;
    text-align:left;
}

#MMMenuContainer0120121143_0 {
/* This ID is related to the master menu div for menu MMMenuContainer0120121143_0 and contains the important positioning information for the menu as a whole */
    position:absolute;
    left:-1px;
    top:21px;
    visibility:hidden;
    z-index:300;
}

#MMMenu0120121143_0 {
/* This class defines things about menu MMMenu0120121143_0's div. */
    position:absolute;
    left:0px;
    top:0px;
    visibility:hidden;
    background-color:transparent;
    width:129px;
    height:44px;
}

.MMMIFVStyleMMMenu0120121143_0 {
    /* This class determines the general characteristics of the menu items in menu MMMenu0120121143_0 */
    width:129px;
    height:22px;
    background-image: url(volume_system_off.gif);
}

.MMMIVStyleMMMenu0120121143_0 {
    /* This class determines the general characteristics of the menu items in menu MMMenu0120121143_0 */
    width:129px;
    height:22px;
    background-image: url(styling_system_off.gif);
}

#MMMenu0120121143_0_Item_0 {
/* Unique ID for item 0 of menu MMMenu0120121143_0 so we can set its position */
    left:0px;
    top:0px;
}

#MMMenu0120121143_0_Item_1 {
/* Unique ID for item 1 of menu MMMenu0120121143_0 so we can set its position */
    left:0px;
    top:22px;
   
}

#MMMenuContainer0120121143_0 img {
/* needed for Mozilla/Camino/Netscape */
    border:0px;
}


#MMMenuContainer0120121143_0 a {
/* Controls the general apperance for menu MMMenuContainer0120121143_0's items, including color and font */
    text-decoration:none;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#00ff00;
    text-align:left;
    vertical-align:middle;
    padding:0px;
    font-weight:normal;
    font-style:normal;
    display:block;
    position:absolute;
}

#MMMenuContainer0120121143_0 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0120121143_0 */
    color:#993399;
    background: url("volume_system_on.gif") #000084;
}

#MMMenuContainer0120121143_0 a {
/* Controls the general apperance for menu MMMenuContainer0120121143_0's items, including color and font */
    text-decoration:none;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#00ff00;
    text-align:left;
    vertical-align:middle;
    padding:0px;
    font-weight:normal;
    font-style:normal;
    display:block;
    position:absolute;
}
Avatar billede henrik20 Nybegynder
21. januar 2006 - 17:35 #3
(løst)
Avatar billede roenving Novice
21. januar 2006 - 17:38 #4
Avatar billede henrik20 Nybegynder
21. januar 2006 - 19:04 #5
-
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester