www.webdeveloper.com
Results 1 to 2 of 2

Thread: Image linking, new to javascript!

Hybrid View

  1. #1
    Join Date
    Jul 2011
    Posts
    1

    Unhappy Image linking, new to javascript!

    Hi, I am new to JavaScript, but I know html and most CSS, I need help linking parts of this image, and after some research, i found javascript is the simple way. The image is at pariahzine.com and I need to make the "teeth" into links. Advice?

  2. #2
    Join Date
    May 2011
    Posts
    194

    object map

    Hi,

    that is no picture
    that is a SVG, see http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

    Some browsers can not render SVG.

    Convert SVG to Image like png or jpg.


    ----------------------------------------------------------------------------------------------

    MAP Element | map Object (Internet Explorer)
    http://msdn.microsoft.com/en-us/library/ms533050.aspx

    --------------------------------------------------------------------------------

    Contains coordinate data for client-side image maps.
    siehe auch Objekt area

    Members Table

    The following table lists the members exposed by the map object. Click a tab on the left to choose the type of member you want to view.


    Attribute Property Description
    canHaveChildren Retrieves a value indicating whether the object can contain children.
    canHaveHTML Sets or retrieves the value indicating whether the object can contain rich HTML markup.
    CLASS className Sets or retrieves the class of the object.
    DIR dir Sets or retrieves the reading order of the object.
    disabled Sets or retrieves the value that indicates whether the user can interact with the object.
    firstChild Retrieves a reference to the first child in the childNodes collection of the object.
    ID id Retrieves the string identifying the object.
    innerHTML Sets or retrieves the HTML between the start and end tags of the object.
    innerText Sets or retrieves the text between the start and end tags of the object.
    isContentEditable Retrieves the value indicating whether the user can edit the contents of the object.
    isDisabled Retrieves the value indicating whether the user can interact with the object.
    isMultiLine Retrieves the value indicating whether the content of the object contains one or more lines.
    isTextEdit Retrieves whether a TextRange object can be created using the object.
    LANG lang Sets or retrieves the language to use.
    LANGUAGE language Sets or retrieves the language in which the current script is written.
    lastChild Retrieves a reference to the last child in the childNodes collection of an object.
    NAME name Sets or retrieves the name of the object.
    nextSibling Retrieves a reference to the next child of the parent for the object.
    nodeName Retrieves the name of a particular type of node.
    nodeType Retrieves the type of the requested node.
    nodeValue Sets or retrieves the value of a node.
    offsetHeight Retrieves the height of the object relative to the layout or coordinate parent, as specified by the offsetParent property.
    offsetLeft Retrieves the calculated left position of the object relative to the layout or coordinate parent, as specified by the offsetParent property.
    offsetParent Retrieves a reference to the container object that defines the offsetTop and offsetLeft properties of the object.
    offsetTop Retrieves the calculated top position of the object relative to the layout or coordinate parent, as specified by the offsetParent property.
    offsetWidth Retrieves the width of the object relative to the layout or coordinate parent, as specified by the offsetParent property.
    outerHTML Sets or retrieves the object and its content in HTML.
    outerText Sets or retrieves the text of the object.
    ownerDocument Sets or retrieves the document object associated with the node.
    parentElement Retrieves the parent object in the object hierarchy.
    parentNode Retrieves the parent object in the document hierarchy.
    parentTextEdit Retrieves the container object in the document hierarchy that can be used to create a TextRange containing the original object.
    previousSibling Retrieves a reference to the previous child of the parent for the object.
    readyState Retrieves the current state of the object.
    scopeName Retrieves the namespace defined for the element.
    sourceIndex Retrieves the ordinal position of the object, in source order, as the object appears in the document's all collection.
    STYLE Sets an inline style for the element.
    tagName Retrieves the tag name of the object.
    tagUrn Sets or retrieves the Uniform Resource Name (URN) specified in the namespace declaration.
    TITLE title Sets or retrieves advisory information (a ToolTip) for the object.
    uniqueID Retrieves an autogenerated, unique identifier for the object.

    Method Description
    addBehavior Attaches a behavior to the element.
    appendChild Appends an element as a child to the object.
    applyElement Makes the element either a child or parent of another element.
    attachEvent Binds the specified function to an event, so that the function gets called whenever the event fires on the object.
    clearAttributes Removes all attributes and values from the object.
    click Simulates a click by causing the onclick event to fire.
    cloneNode Copies a reference to the object from the document hierarchy.
    componentFromPoint Returns the component located at the specified coordinates via certain events.
    contains Checks whether the given element is contained within the object.
    detachEvent Unbinds the specified function from the event, so that the function stops receiving notifications when the event fires.
    dragDrop Initiates a drag event.
    fireEvent Fires a specified event on the object.
    getAdjacentText Returns the adjacent text string.
    getAttribute Retrieves the value of the specified attribute.
    getAttributeNode Retrieves an attribute object referenced by the attribute.name property.
    getBoundingClientRect Retrieves an object that specifies the bounds of a collection of TextRectangle objects.
    getClientRects Retrieves a collection of rectangles that describes the layout of the contents of an object or range within the client. Each rectangle describes a single line.
    getElementsByTagName Retrieves a collection of objects based on the specified element name.
    hasChildNodes Returns a value that indicates whether the object has children.
    insertAdjacentElement Inserts an element at the specified location.
    insertAdjacentHTML Inserts the given HTML text into the element at the location.
    insertAdjacentText Inserts the given text into the element at the specified location.
    insertBefore Inserts an element into the document hierarchy as a child node of a parent object.
    mergeAttributes Copies all read/write attributes to the specified element.
    normalize Merges adjacent TextNode objects to produce a normalized document object model.
    releaseCapture Removes mouse capture from the object in the current document.
    removeAttribute Removes the given attribute from the object.
    removeAttributeNode Removes an attribute object from the object.
    removeBehavior Detaches a behavior from the element.
    removeChild Removes a child node from the object.
    removeNode Removes the object from the document hierarchy.
    replaceAdjacentText Replaces the text adjacent to the element.
    replaceChild Replaces an existing child element with a new child element.
    replaceNode Replaces the object with another element.
    scrollIntoView Causes the object to scroll into view, aligning it either at the top or bottom of the window.
    setAttribute Sets the value of the specified attribute.
    setAttributeNode Sets an attribute object node as part of the object.
    setCapture Sets the mouse capture to the object belonging to the current document.
    swapNode Exchanges the location of two objects in the document hierarchy.




    Remarks

    An image map is a graphic image, with predefined regions, that contains links to other documents or anchors. For example, you could create an image of the solar system containing links that the user can click to navigate to pages for the individual planets.

    The map object is referenced with the USEMAP attribute in an IMG element, as follows:

    <IMG SRC="solarsys.gif" USEMAP="#SystemMap">

    A MAP element contains a set of AREA elements defining the linking regions in the image.

    This element is available in HTML as of Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

    This element is not rendered.

    This element requires a closing tag.

    Example

    This example provides the full code for an image map of the solar system. It creates links from the image map to individual images of the planets using the AREA element with the MAP element, COORDS value, and SHAPE attribute. The user clicks the sun or any planet to link to an individual image. To return to the solar system image map, the user clicks the Back button.

    Hide Example

    <P><IMG SRC="solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0
    ALT="Solar System" USEMAP="#SystemMap">

    <MAP NAME="SystemMap">
    <AREA SHAPE="rect" COORDS="0,0,82,126"
    HREF="/workshop/graphics/sun.gif">
    <AREA SHAPE="circle" COORDS="90,58,3"
    HREF="/workshop/graphics/merglobe.gif">
    <AREA SHAPE="circle" COORDS="124,58,8"
    HREF="/workshop/graphics/venglobe.gif">
    <AREA SHAPE="circle" COORDS="162,58,10"
    HREF="/workshop/graphics/earglobe.gif">
    <AREA SHAPE="circle" COORDS="203,58,8"
    HREF="/workshop/graphics/marglobe.gif">
    <AREA SHAPE="poly" COORDS="221,34,238,37,257,32,278,44,284,60,
    281,75,288,91,267,87,253,89,237,81,229,64,228,54"
    HREF="/workshop/graphics/jupglobe.gif">
    <AREA SHAPE="poly" COORDS="288,19,316,39,330,37,348,47,351,66,
    349,74,367,105,337,85,324,85,307,77,303,60,307,50"
    HREF="/workshop/graphics/satglobe.gif">
    <AREA SHAPE="poly" COORDS="405,39,408,50,411,57,410,71,
    404,78,393,80,383,86,381,75,376,69,376,56,380,48,393,44"
    HREF="/workshop/graphics/uraglobe.gif">
    <AREA SHAPE="poly" COORDS="445,38,434,49,431,53,427,62,430,72,
    435,77,445,92,456,77,463,72,463,62,462,53,455,47"
    HREF="/workshop/graphics/nepglobe.gif">
    <AREA SHAPE="circle" COORDS="479,66,3"
    HREF="/workshop/graphics/pluglobe.gif">
    </MAP>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles