Avatar billede dumledumledumle Nybegynder
14. august 2007 - 15:42 Der er 6 kommentarer og
1 løsning

Ændre skrifttype ved mouse-over?

Hej experts!!

http://dumledumledumle.frac.dk/menu.html

Jeg sidder og bøvler lidt med denne menu. Jeg kunne godt tænke mig, at skrifttypen ved mouse-over ændre sig til #FFFFFF eller hvid i stedet for den grå farve. Samtidig kan jeg ikke finde ud af, hvordan jeg får skrifttypen bold både før og ved mouse-over.

Kilder er også at finde her:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- <!-- Begin
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);

function getRef(id) {
    if (isDOM) return document.getElementById(id);
    if (isIE4) return document.all[id];
    if (isNS4) return document.layers[id];
}

function getSty(id) {
    return (isNS4 ? getRef(id) : getRef(id).style);
}

var popTimer = 0;
var litNow = new Array();

function popOver(menuNum, itemNum) {
    clearTimeout(popTimer);
    hideAllBut(menuNum);
    litNow = getTree(menuNum, itemNum);
    changeCol(litNow, true);
    targetNum = menu[menuNum][itemNum].target;
    if (targetNum > 0) {
        thisX = parseInt(menu[menuNum][0].ref.left) + parseInt(menu[menuNum][itemNum].ref.left);
        thisY = parseInt(menu[menuNum][0].ref.top) + parseInt(menu[menuNum][itemNum].ref.top);
        with (menu[targetNum][0].ref) {
            left = parseInt(thisX + menu[targetNum][0].x);
            top = parseInt(thisY + menu[targetNum][0].y);
            visibility = 'visible';
        }
    }
}

function popOut(menuNum, itemNum) {
    if ((menuNum == 0) && !menu[menuNum][itemNum].target)
        hideAllBut(0)
    else
        popTimer = setTimeout('hideAllBut(0)', 500);
}

function getTree(menuNum, itemNum) {
    itemArray = new Array(menu.length);

    while(1) {
        itemArray[menuNum] = itemNum;
        if (menuNum == 0) return itemArray;
        itemNum = menu[menuNum][0].parentItem;
        menuNum = menu[menuNum][0].parentMenu;
    }
}

function changeCol(changeArray, isOver) {
    for (menuCount = 0; menuCount < changeArray.length; menuCount++) {
        if (changeArray[menuCount]) {
            newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;
            with (menu[menuCount][changeArray[menuCount]].ref) {
                if (isNS4) bgColor = newCol;
                else backgroundColor = newCol;
            }
        }
    }
}

function hideAllBut(menuNum) {
    var keepMenus = getTree(menuNum, 1);
    for (count = 0; count < menu.length; count++)
    if (!keepMenus[count])
    menu[count][0].ref.visibility = 'hidden';
    changeCol(litNow, false);
}

// *** MENU CONSTRUCTION FUNCTIONS ***

function Menu(isVert, popInd, x, y, width, overCol, backCol, borderClass, textClass) {
    // True or false - a vertical menu?
    this.isVert = isVert;
    // The popout indicator used (if any) for this menu.
    this.popInd = popInd
    // Position and size settings.
    this.x = x;
    this.y = y;
    this.width = 194
    // Colours of menu and items.
    this.overCol = overCol;
    this.backCol = backCol;
    // The stylesheet class used for item borders and the text within items.
    this.borderClass = borderClass;
    this.textClass = textClass;
    // Parent menu and item numbers, indexed later.
    this.parentMenu = null;
    this.parentItem = null;
    // Reference to the object's style properties (set later).
    this.ref = null;
}

function Item(text, href, frame, length, spacing, target) {
    this.text = text;
    this.href = href;
    this.frame = frame;
    this.length = 18
    this.spacing = 17
    this.target = target;
    // Reference to the object's style properties (set later).
    this.ref = null;
}

function writeMenus() {
    if (!isDOM && !isIE4 && !isNS4) return;
    for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) {
        // Variable for holding HTML for items and positions of next item.
        var str = '', itemX = 0, itemY = 0;

        // Remember, items start from 1 in the array (0 is menu object itself, above).
        // Also use properties of each item nested in the other with() for construction.
        for (currItem = 1; currItem < menu[currMenu].length; currItem++) with (menu[currMenu][currItem]) {
            var itemID = 'menu' + currMenu + 'item' + currItem;

            // The width and height of the menu item - dependent on orientation!
            var w = (isVert ? width : length);
            var h = (isVert ? length : width);

            // Create a div or layer text string with appropriate styles/properties.
            // Thanks to Paul Maden (www.paulmaden.com) for helping debug this in IE4, apparently
            // the width must be a miniumum of 3 for it to work in that browser.
            if (isDOM || isIE4) {
                str += '<div id="' + itemID + '" style="position: absolute; left: ' + itemX + '; top: ' + itemY + '; width: ' + w + '; height: ' + h + '; visibility: inherit; ';
                if (backCol) str += 'background: ' + backCol + '; ';
                str += '" ';
            }
            if (isNS4) {
                str += '<layer id="' + itemID + '" left="' + itemX + '" top="' + itemY + '" width="' + w + '" height="' + h + '" visibility="inherit" ';
                if (backCol) str += 'bgcolor="' + backCol + '" ';
            }
            if (borderClass) str += 'class="' + borderClass + '" ';

            // Add mouseover handlers and finish div/layer.
            str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' + currMenu + ',' + currItem + ')">';
            // Add contents of item (default: table with link inside).
            // In IE/NS6+, add padding if there's a border to emulate NS4's layer padding.
            // If a target frame is specified, also add that to the <a> tag.

            str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isNS4 && borderClass ? 3 : 0) + '"><tr><td align="left" height="' + (h - 7) + '">' + '<a class="' + textClass + '" href="' + href + '"' + (frame ? ' target="' + frame + '">' : '>') + text + '</a></td>';
            if (target > 0) {
                // Set target's parents to this menu item.
                menu[target][0].parentMenu = currMenu;
                menu[target][0].parentItem = currItem;
                // Add a popout indicator.
                if (popInd) str += '<td class="' + textClass + '" align="right">' + popInd + '</td>';
            }
            str += '</tr></table>' + (isNS4 ? '</layer>' : '</div>');
            if (isVert) itemY += length + spacing;
            else itemX += length + spacing;
        }

        if (isDOM) {
            var newDiv = document.createElement('div');
            document.getElementsByTagName('body').item(0).appendChild(newDiv);
            newDiv.innerHTML = str;
            ref = newDiv.style;
            ref.position = 'absolute';
            ref.visibility = 'hidden';
        }

        // Insert a div tag to the end of the BODY with menu HTML in place for IE4.
        if (isIE4) {
            document.body.insertAdjacentHTML('beforeEnd', '<div id="menu' + currMenu + 'div" ' + 'style="position: absolute; visibility: hidden">' + str + '</div>');
            ref = getSty('menu' + currMenu + 'div');
        }

        // In NS4, create a reference to a new layer and write the items to it.
        if (isNS4) {
            ref = new Layer(0);
            ref.document.write(str);
            ref.document.close();
        }

        for (currItem = 1; currItem < menu[currMenu].length; currItem++) {
            itemName = 'menu' + currMenu + 'item' + currItem;
            if (isDOM || isIE4) menu[currMenu][currItem].ref = getSty(itemName);
            if (isNS4) menu[currMenu][currItem].ref = ref.document[itemName];
        }
    }
    with(menu[0][0]) {
        ref.left = x;
        ref.top = y;
        ref.visibility = 'visible';
    }
}


var popOldWidth = window.innerWidth;
nsResizeHandler = new Function('if (popOldWidth != window.innerWidth) location.reload()');

if (isNS4) document.captureEvents(Event.CLICK);
    document.onclick = clickHandle;

function clickHandle(evt) {
    if (isNS4) document.routeEvent(evt);
    hideAllBut(0);
}

function moveRoot() {
    with(menu[0][0].ref) left = ((parseInt(left) < 100) ? 100 : 5);
}


//    new Menu
//    menu[menuNumber][0] = new Menu(Vertical menu? (true/false), 'popout indicator', left, top, height,
//    'mouseover colour', 'background colour', 'border stylesheet', 'text stylesheet');

//    new Item
//    menu[menuNumber][itemNumber] = new Item('Text', 'URL', 'target frame', length of menu item,
//    additional spacing to next menu item, number of target menu to popout);

menu = new Array();
menu[0] = new Array();
menu[0][0] = new Menu(true, '?', 0, 0, 17, '125fa5', '', '', 'itemText');
menu[0][1] = new Item('Intro', '?vis=login', '', 90, 0, 0);
menu[0][2] = new Item('Adresseliste', '?vis=adr', '', 90, 0, 0);
menu[0][3] = new Item('Forum', '?vis=forum', '', 90, 0, 0);
menu[0][4] = new Item('Galleri', '?vis=gal', '', 90, 0, 0);
menu[0][5] = new Item('Profiler', '?vis=pro', '', 90, 0, 0);
-->
</script>

<style>
<!--

.itemBorder { border: 1px solid black }
.itemText { text-decoration:none; color:#848484; font-size: 10px;font-family: Geneva,Arial,Verdana,sans-serif;margin-left: 10px;}

-->
</style>
</head>
<body onLoad='writeMenus()' onResize='if (isNS4) nsResizeHandler()'>
</body>
</html>
Avatar billede thesurfer Nybegynder
14. august 2007 - 16:10 #1
Beklager, men må bare side det (har dog ikke kigget JavaScript-koden igennem):

Det er dumt at bruge JavaScript til at skifte farve, når CSS er optimal til det her..

PS: #FFFFFF er hvid.
Avatar billede thesurfer Nybegynder
14. august 2007 - 16:11 #2
Hvis det er denne her:

.itemText { text-decoration:none; color:#848484; font-size: 10px;font-family: Geneva,Arial,Verdana,sans-serif;margin-left: 10px;}

mener jeg at du bare kan tilføje:

.itemText:hover { text-decoration:none; color:#FFFFFF; font-size: 10px;font-family: Geneva,Arial,Verdana,sans-serif;margin-left: 10px;}

Men jeg er ikke helt sikker..
Avatar billede dumledumledumle Nybegynder
14. august 2007 - 16:17 #3
Det er korrekt at teksten skifter farve, men KUN når du har musen over teksten. Jeg vil gerne have en effekt, hvor skrifttypen skifter farve ved mouse-over uanset hvor på bælken du holder har musen over.

Jamen, hvis du har et forslag til hvor jeg kan se et eksempel/source på CSS vil det være fint?
Avatar billede thesurfer Nybegynder
14. august 2007 - 16:41 #4
Du kunne evt prøve med:

td:hover { color:#ffffff }

Bare for at teste:

td {color: #ff0000}

Så skulle teksten i cellerne gerne blive med rødt, med mindre at du bruger noget andet css kode..

Jeg kan se at du har en klasse, som du bruger på linksne:

<a class="' + textClass + '" href=

hvor textClass henviser til itemText (se bunden af dette indlæg), hvilket betyder at 14/08-2007 16:11:31 burde virke, hvis ":hover" er brugt korrekt..


itemText-kald (sidste parameter):
menu[0][0] = new Menu(true, '?', 0, 0, 17, '125fa5', '', '', 'itemText');
Avatar billede thesurfer Nybegynder
14. august 2007 - 16:43 #5
En meget simpel test:

<style type="text/css">
.itemText
{
color:#00ff00;
}

.itemText:hover
{
color:#ff0000;
}
</style>

<a href="#" onclick="return false" class="itemText">tester lige klasser</a>
Avatar billede dumledumledumle Nybegynder
16. august 2007 - 23:09 #6
Har selv fundet ud af det. Tak for kommentarerne.
Avatar billede thesurfer Nybegynder
16. august 2007 - 23:40 #7
Hvad mener du med at du har fundet ud af det? Jeg har jo fortalt dig det.
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