So you have a header div... it has a bunch of navigation links in it, essentially image-text with linked divs on top for clicking.

Is there any clever way to make the image around that particular link element change when you're on its corresponding page?

  • Are you looking for a CSS only solution? Or is javascript or any of it's libraries an option? Could you also provide some basic HTML as to how you have your header laid out. Mottie over 6 years ago

3 answers

0
points

Instead of using traditional "image swap" behaviors with javascript, look into background-image repositioning with CSS. It's really simple and very elegant. This link gives a good summary of the method:

http://www.webvamp.co.uk/blog/coding/css-image-rollovers/

Answered over 6 years ago by Gary Hepting
Kevin 0
0
points

We use this nifty javascript function. You would of course replace ./path/to/your/image/image.png with the path to the image you want to become the bg image to the link. *Edit: Pardon, forgot to add the class function as well.

window.onload = kickOff();

function kickOff() {
    aAll = document.getElementsByTagName("a");
    // disable and change color of active page's link
    for (var i=0; i<aAll.length; i++) {
        if (window.location.href.split("#")[0] == aAll[i].href) {
            aAll[i].onclick = function() {if (this.blur) {this.blur();} return false;}
            aAll[i].style.cursor = "text";
            aAll[i].style.borderBottom = "none";
            aAll[i].style.color = "#FFFFFF";
            aAll[i].style.textShadow = "none";
            if (aAll[i].className == "site") {
                aAll[i].style.color = "#ffffff";
            }
            else {
            aAll[i].style.background = "#330066 url(./path/to/your/image/image.png) repeat-x scroll 0pt 100%";
            }
        }
        // fix ie's lack of support for css :focus so tabbers see skip links on focus
        if (navigator.appName == "Microsoft Internet Explorer" && aAll[i].className == "skip") {
            var restoreColor = aAll[i].style.color;
            var restoreBorder = aAll[i].style.borderBottom;
            aAll[i].onfocus = function() {this.style.color = "#999999"; this.style.borderBottom = "1px solid #999999";}
            aAll[i].onblur = function() {this.style.color = restoreColor; this.style.borderBottom = restoreBorder;}
        }
     }
    // fixes in-page link bug for Internet Explorer
    if (navigator.appName == "Microsoft Internet Explorer") {
        getElementsByClass("target");
    }
}

function getElementsByClass(searchClass,node,tag) {
    // fixes in-page link bug for Internet Explorer; first find all destinations (elements with classname "target"):
    var classElements = new Array();
    if ( node == null ) {
            node = document;
    }
    if ( tag == null ) {
            tag = '*';
    }
    var elAll = node.getElementsByTagName(tag);
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (var i = 0, j = 0; i < elAll.length; i++) {
        if (pattern.test(elAll[i].className)) {
            classElements[j] = elAll[i];
            j++;
        }
    }
    // then insert what is an invalid attribute for most elements, with an invalid value to boot:
    for (var i=0; i<classElements.length; i++) {
        classElements[i].setAttribute("tabIndex",-1)
    }
}
Answered over 6 years ago by Kevin
Mottie 1134
0
points

Here are a few tutorials to give you ideas:

Answered over 6 years ago by Mottie