JavaScript Image Combobox

Subrata Mohanta

2.50/5 (3 votes)

28 May 2009CPOL

39.1K

397

A combobox which contains images and can be added in anywhere.

Download source code - 4.84 KB

ImageCombo

Introduction

Following is an example of an image combobox. As combo boxes do not support images, I developed a combobox like structure and made it a generic one so that it can be used any where.

Using the code

Code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Image ComboBox</title>

    <script type="text/javascript" src="Scripts/ImageCombo.js"></script>

</head>
<body onload="LoadDocument()">
    <div>
        <p>
            I was working on a project when I nedded a combo box from which an image can be
            selected. I searched a lot in the internet but could not found any result then I
            started to buid m own control which could behave like a combo box and should be
            a generic one. Here is the example of a pure html+javascript image combobox. Its
            working fine in all the browsers. Check it out.
        </p>
    </div>
    <table>
        <tr>
            <td>
                Trend
            </td>
            <td style="width: 20pt;">
            </td>
            <td>
                <table id="tblImgCombo" cellpadding="0" 
                        cellspacing="0" style="border: none;">
                    <tbody>
                        <tr>
                            <td id="tdTrend" valign="middle" 
                                align="center" style="width: 20px; height: 18px;
                                border: solid 1px #6699CC;">
                                <img src='Images/rund.gif' alt="image0">
                            </td>
                            <td valign="middle" id="tdDown" 
                                align="center" style="width: 14px; height: 18px;
                                border: solid 1px #6699CC; border-left: none;" 
                                onclick="displayList(
                                    this.parentNode.parentNode.parentNode.id);">
                                  <img style="padding-left: 3px;" id="downArrow" 
                                    src="Images/downArrow.jpg" height="8px"
                                    width="8px" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
    <div id="dvList" style="display: none;">
        <table id="tblBelowPart" cellpadding="0" 
               cellspacing="0" style="border: none; position: absolute; z-index: 10;">
            <tr>
                <td bgcolor="white" valign="middle" 
                    style="border: solid 1px #6699CC; padding-top: 2px;
                      padding-bottom: 2px; width: 20px;" align="center">
                    <img alt="image1" src="Images/arow_up.gif" 
                      onclick="javascript:setImage('arow_up.gif','image1');" />
                </td>
            </tr>
            <tr>
                <td bgcolor="white" 
                  style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
                    padding-bottom: 2px;" valign="middle" align="center">
                    <img alt="image-1" src="Images/arow_dn.gif" 
                      onclick="javascript:setImage('arow_dn.gif','image-1');" />
                </td>
            </tr>
            <tr>
                <td bgcolor="white" 
                  style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
                    padding-bottom: 2px;" valign="middle" align="center">
                    <img alt="image0" src="Images/rund.gif" 
                      onclick="javascript:setImage('rund.gif','image0');" />
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

The above example has two main blocks in the HTML page.

First one for displaying a combo box like structure:

HTML

<table>
    <tr>
        <td>
            Trend
        </td>
        <td style="width: 20pt;">
        </td>
        <td>
            <table id="tblImgCombo" cellpadding="0" 
                  cellspacing="0" style="border: none;">
                <tbody>
                    <tr>
                        <td id="tdTrend" 
                          valign="middle" align="center" 
                          style="width: 20px; height: 18px; border: 
                                  solid 1px #6699CC;">
                            <img src='Images/rund.gif' alt="image0">
                        </td>
                        <td valign="middle" id="tdDown" 
                              align="center" 
                              style="width: 14px; height: 18px; border: 
                                 solid 1px #6699CC; border-left: none;" 
                              onclick="displayList(
                                this.parentNode.parentNode.parentNode.id);">
                            <img style="padding-left: 3px;" 
                              id="downArrow" 
                              src="Images/downArrow.jpg" 
                              height="8px"
                              width="8px" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>

The second one is a piece of code which will be attached under the above code at run time, when the right side button/image is clicked.

HTML

<div id="dvList" style="display: none;">
    <table id="tblBelowPart" cellpadding="0" 
      cellspacing="0" 
      style="border: none; position: absolute; z-index: 10;">
        <tr>
            <td bgcolor="white" valign="middle" 
              style="border: solid 1px #6699CC; padding-top: 2px; 
                    padding-bottom: 2px; width: 20px;" align="center">
                <img alt="image1" src="Images/arow_up.gif" 
                  onclick="javascript:setImage('arow_up.gif','image1');" />
            </td>
        </tr>
        <tr>
            <td bgcolor="white" 
              style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
                    padding-bottom: 2px;" 
              valign="middle" align="center">
                <img alt="image-1" src="Images/arow_dn.gif" 
                 onclick="javascript:setImage('arow_dn.gif','image-1');" />
            </td>
        </tr>
        <tr>
            <td bgcolor="white" 
                  style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
                      padding-bottom: 2px;" valign="middle" align="center">
                <img alt="image0" src="Images/rund.gif" 
                  onclick="javascript:setImage('rund.gif','image0');" />
            </td>
        </tr>
    </table>
</div>

Create a JavaScript file for the following JavaScript code, or you may also add the following blocks in between the script blocks in the Head section:

JavaScript

/*
* Mechanism to Handle the Image Dropdown for the Trend Field
*/

//Local Variable to store the Unset TrendImageDropDown Address
var DropdownFlag = "";

//Functions for TrendValue Images

var displayList=function(dispTableId)
{
    var tbl = "";
    var iTotalRows = "";
    
    if(DropdownFlag == "")
    {
        tbl = document.getElementById(dispTableId).childNodes[0];
        iTotalRows = tbl.getElementsByTagName("tr");
        //alert('TestForNetscape,    Total Rows : '+iTotalRows.length);
        //alert(iTotalRows.length);
        
        if(iTotalRows.length == 1)
        {
            var tblList = document.getElementById("dvList").innerHTML;
            var newRow = tbl.insertRow(1);
            var NewChildCell = newRow.insertCell(0);
            
            //if(browser == "IE" && IEversion < 8)
            {
                NewChildCell.innerHTML = tblList;
            }
            /*else
            {
                NewChildCell.style.position="absolute";
                NewChildCell.innerHTML = tblList;
            }*/
            //alert('TestForNetscape, tbl.innerHTML :- '+tbl.innerHTML);
            
            DropdownFlag = dispTableId;
        }
        else
        {
            if(DetactBrowser() == "ie")
            {
                tbl.childNodes[0].childNodes[1].removeNode(true)
            }
            else
            {
                tbl.deleteRow(1);
            }
            DropdownFlag = "";
        }
    }
    else
    {
        tbl = document.getElementById(DropdownFlag).childNodes[0];
        iTotalRows = tbl.getElementsByTagName("tr");
        //alert(iTotalRows.length);
        
        if(DetactBrowser() == "ie")
        {
            for(i=1; i < iTotalRows.length; i++)
            {
                if(iTotalRows.length > 1)
                {
                    tbl.childNodes[1].removeNode(true);
                }
                tbl = document.getElementById(DropdownFlag).childNodes[0];
                iTotalRows = tbl.getElementsByTagName("tr");
            }
        }
        else
        {
            tbl.deleteRow(1);
        }
        DropdownFlag = "";
    }
}

var setImage=function(img,alt)
{
    var TableID= document.getElementById(DropdownFlag);
    TableID.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src =  "Images/"+img;
    TableID.childNodes[0].childNodes[0].childNodes[0].childNodes[0].alt = alt;
    
    //Remove the ClildNode Containing the List
    displayList(TableID.id);
    
    if(alt == 'image1')
        alert('Trend is Up');
    else if(alt == 'image-1')
        alert('Trend is Down');
    else if(alt == 'image0')
        alert('Trend is parallel');
}

function LoadDocument()
{
    document.onclick=HideDropDown;
}

function getTarget(x)
{
    x = x || window.event;
    return x.target || x.srcElement;
}

var HideDropDown=function(evt)
{
    var t = getTarget(evt);
    //alert(t.id);
    if(t.id == "" && DropdownFlag != "")
    {
        displayList(DropdownFlag);
    }
}

var returnImagePath = function(path)
{
    //alert(path);
    var image = path;
    var temp = image.split('/');
    return ("Images/"+temp[temp.length-1]);
}

var DetactBrowser = function()
{
    var browser=navigator.appName;
    var b_version=navigator.appVersion;
    var version=parseFloat(b_version);
    
    if(browser == "Netscape")
        return "ns";
    else if(browser == "Microsoft Internet Explorer")
        return "ie";
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)