www.insideDHTML.com
Inside Dynamic HTML | Fun and Games | The 10K Demo | XML Online | CSS Online | Resources
Write Once! | DHTML Toolkits | Inside Techniques | Inside Scriptlets

Inside Techniques/

 
Introduction
moveo FunctionIE4
fadeo FunctionIE4
bubblo FunctionIE4
typeo FunctionIE4
switcho FunctionIE4
scrollo FunctionIE3,IE4,NS3,NS4
isie4 FunctionIE4
profileo FunctionIE4
Anchor FunctionsIE4
Path FunctionsIE4

styleo FunctionsIE4

Download Library
 

Anchor Functions

This function works automatically to improve your anchors and images. Simply include the library in your HTML file and any anchor will update the status bar with the text inside the <a> tags. You can customize the text displayed in the status bar by supplying the custom mousetext attribute. In addition, a rich HTML tooltip can be displayed when the user hovers over the anchor by specifying the custom tip attribute.

For example, to customize anchors:
Inside Dynamic HTML 

  <A HREF="page1.htm">This is displayed in the status bar</A>
  <A HREF="page2.htm" mousetext="Display this in the status bar">
    The mousetext is displayed instead
  </A>
  <A HREF="http://www.insideDHTML.com" 
     mousetext="Inside Dynamic HTML" 
     tip="The Place for Dynamic HTML.">
    Inside Dynamic HTML
  </A>

You can see these functions in action by hovering over the menu bar to the leftIE4 Only.

For images, specify the custom newimg attribute, and when the mouse moves over the image, the new image is swapped into view. For example, 

<IMG newimg="over.gif" SRC="notover.gif">

Anchor Functions

document.onmouseover=makeCool;
document.onmouseout=makeNormal;

function makeCool() {
        src = event.srcElement;

        if (src.tip != null) {
                        tttext = src.tip
                        theY = src.offsetTop + src.offsetHeight;
                        nextSrc = src.offsetParent;
                        for (i=0; nextSrc.tagName!="BODY"; i++) {                               
                                theY = theY + nextSrc.offsetTop;
                                nextSrc = nextSrc.offsetParent;
                        }
                        document.ttip = window.setTimeout("Tool(" + window.event.x + "," + theY + ",'" + tttext + "');", 750);
        }


        if (src.tagName == "A") {
                src.oldColor = src.style.color;
                src.style.color = "red";

                if (src.mousetext != null) {
                        intext = src.mousetext;
                } else {
                        intext = src.innerText;
                }
                window.status = intext;
                document.scrollOld = document.scrollGo;
                document.scrollGo = 0;

        } else if (src.tagName == "IMG") {
                onImg = src;
                if (onImg.newimg != null) {
                        onImg.oldSrc = onImg.src;
                        onImg.src = onImg.newimg;
                }
        }
}

function makeNormal() {
        src = event.srcElement;
                if (src.tip != null) {
                        window.clearTimeout(document.ttip);
			if (document.all.ToolTip == null) {
                                document.body.insertAdjacentHTML('beforeEnd', '<span id=ToolTip style="visibility: hidden; z-index: 300; background-color: #FFFF44; position: absolute; font-size: 10pt; width: 0; height: 0; border: 1 solid black"></span>');
		        }
                        ToolTip.style.visibility = "hidden";
                }
        if (src.tagName == "A") {
                src.style.color = src.oldColor;

                window.status = "";
                document.scrollGo = document.scrollOld;

        } else if (src.tagName == "IMG") {
                onImg = src;
                if (onImg.newimg != null) {
                        onImg.src = onImg.oldSrc;
                }
        }
}

function Tool(x, y, t) {
        if (document.all.ToolTip == null) {
                document.body.insertAdjacentHTML('beforeEnd', '<span id=ToolTip style="visibility: hidden; z-index: 300; background-color: #FFFF44; position: absolute; font-size: 10pt; width: 0; height: 0; border: 1 solid black"></span>');
        }
        ToolTip.style.width = 200;
        ToolTip.style.posTop = y;
        ToolTip.style.posLeft = x + 10;
        ToolTip.innerHTML = "" + t + "";
        if (ToolTip.scrollWidth < 200) {
                ToolTip.style.width = ToolTip.scrollWidth;
        } else {
                ToolTip.innerHTML = t;
                ToolTip.style.width = 200;                  
        }           
        ToolTip.style.visibility = "visible";
}

Copyright © 1997-98 InsideDHTML.com, LLC.
All rights reserved.