Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2008
    Thanked 0 Times in 0 Posts

    Lightbox 2 JS Coding Issue

    Hey, first off sorry if I posted this in the wrong forum. I wasn't sure whether to post it here or the JS forum. Mods, please move it if I've got it wrong xD.

    I've been using Lightbox 2 to help with the coding of my interactive website for my school assignment. For some reason, the ability to group my images isn't working. I figure it might be because of some sort of HTML error I've made while coding. A live preview of the site can be viewed here. Below is the HTML being used for the site.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Economy :: The Game</title>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Original:  Randy Bennett (rbennett@thezone.net) -->
    <!-- Web Site:  http://home.thezone.net/~rbennett/sitemap.htm -->
    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->
    <!-- Begin
    N = (document.all) ? 0 : 1;
    var ob;
    function MD(e) {
    if (N) {
    ob = document.layers[e.target.name];
    return false;
    else {
    ob = event.srcElement.parentElement.style;
    function MM(e) {
    if (ob) {
    if (N) {
    ob.moveTo((e.pageX-X), (e.pageY-Y));
    else {
    ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
    ob.pixelTop = event.clientY-Y + document.body.scrollTop;
    return false;
    function MU() {
    ob = null;
    if (N) {
    document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
    document.onmousedown = MD;
    document.onmousemove = MM;
    document.onmouseup = MU;
    //  End -->
    <body style="background-color: #5C0202;">
    <div id="game" align="center">
    	<img src="images/history.gif" alt="" border="0" usemap="#game" />
    	<map name="game">
    		<area shape="rect" coords="646,127,756,218" href="#" alt="" />
    		<area shape="rect" coords="647,302,745,389" href="#" alt="" />
    		<area shape="rect" coords="569,469,655,560" href="#" alt="" />
    		<area shape="rect" coords="398,387,481,473" href="#" alt="" />
    		<area shape="rect" coords="225,298,315,388" href="#" alt="" />
    		<area shape="rect" coords="141,128,228,219" href="#" alt="" />
    		<area shape="rect" coords="55,302,140,386" href="images/questions/q1.png" rel="lightbox[one]" alt="" />
    <div id="1" style="position:absolute;left:50;top:500;">
    	<img src="images/piece1.png" name="1" alt="" />
    <div id="2" style="position:absolute;left:70;top:500;">
    	<img src="images/piece2.png" name="2" alt="" />
    <div id="hidden" style="visibility: hidden;">
    	<img src="images/questions/a1.png" rel="lightbox[one]" alt="" />
    If any other code is needed, please specify.

    Any help is appreciated

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    In a place far, far away...
    Thanked 1,043 Times in 1,019 Posts
    The rel attribute doesn't go on the images. I suggest you look on the lightbox 2 page carefully and figure out what you did wrong. Hint: You have no links.

    Also lightbox isn't setup to work with image maps.


    Posting Permissions

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