JavaScript Image Combobox

Subrata Mohanta

Rate me:

2.50/5 (3 votes)

28 May 2009CPOL

38.6K

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)

Written By

Subrata Mohanta

Software Developer Singapore

Singapore

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

I took Subratas code, and divided it into several <table> and <tr> with style="display"

This code is much simplier, using "display:none"-attribute and works fine with all browsers.

I have used 15 different gif-files, which to be found if you search setImage.
Also I have used "arrowdown.gif" as the icon to show the imagelist.
Since I cant upload these files, you need to substitue the amount and the filenames to your own.

hid_ix_oldactive_img should hold the start-index of the pre-selected image, otherwise -1.

Hope you find this usuable.

You can see how it works here: http://www.cumap.se/aa_test/cbo_image/imgcbo_3.htm
BR
Ulf
---------- Code follows: ---------------------
<!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>
<STYLE TYPE="text/css">
p {
font-family: verdana, arial;
font-size: 0.8em;
font-style: normal;
font-weight: normal;
margin-top: 0.0em;
margin-left: 0.3em;
margin-right: 0.3em;
margin-bottom: 0.5em;
padding-top: 0em;
color: black }
}
</style>

<script type="text/javascript" >

var DropdownFlag = ""; // 'active' if dropdownlist is shown, otherwise blank
var ix_oldactive_img=-1; // Variable to save index to current selected image

var displayList=function(bShow) {
//-------------------------------------------------------------------------------
// This function is invoked on the following events:
// a. User clicks the 'arrow' icon
// b. User clicks anywhere on the document, and the image list is shown
//-------------------------------------------------------------------------------
// alert('bShow='+bShow);
if(bShow) { // Show entire list
document.getElementById("dvList").style.display="";
DropdownFlag="active";
} else { // Hide entire list
document.getElementById("dvList").style.display="none";
DropdownFlag="";
}
}

var setImage=function(img,ix) {
//-------------------------------------------------------------------------------
// This function is invoked if the user selects an image from the dropdown list
//-------------------------------------------------------------------------------
// alert('SetImage='+ix);
if (ix_oldactive_img!=-1) document.getElementById("tr_img"+ix_oldactive_img).style.display=""; // Restore old selected image as visible
document.getElementById("imgactive").src = img; // Set currenct active images as selected

document.getElementById("tr_img"+ix).style.display="none"; // Set selected images as nonvisible in the list
ix_oldactive_img=ix; // Save current pointer to active image
}

function LoadDocument() {
//-------------------------------------------------------------------------------
// body onload
//-------------------------------------------------------------------------------
ix_oldactive_img= document.getElementById("hid_ix_oldactive_img").value; // Save pointer to active images upon load
document.onclick=HideDropDown;
}

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

var HideDropDown=function(evt) {
//-------------------------------------------------------------------------------
// document.onclick event: Hide imagelist if visible
//-------------------------------------------------------------------------------
var t = getTarget(evt);
//alert(t.id);
if(t.id == "" && DropdownFlag != "") {
displayList(false);
}
}

var returnImagePath = function(path)
//-------------------------------------------------------------------------------
//-------------------------------------------------------------------------------
{
//alert(path);
var image = path;
var temp = image.split('/');
return (""+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";
}
</script>

</head>
<body onload="LoadDocument()">
<input type="hidden" id="hid_ix_oldactive_img" name="hid_ix_oldactive_img" value="3">
<div>
<p>Testing dropdowncombo with images...
</p>
</div>
<table>
<tr>
<td valign="top"><p>Select image:
</td>
<td style="width: 20pt;">
</td>
<td>
<table id="tblImgCombo" cellpadding="0"
cellspacing="0" style="border: none;">

<tr>
<td id="tdTrend" valign="middle"
align="center" style="width: 20px; height: 18px;
border: solid 1px #6699CC;">
<img id="imgactive" src='rub_blue02_pc.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(true);">
<img style="padding-left: 1px;" id="downArrow"
src="arrowdown.gif" height="10px"
width="14px" />
</td>
</tr>
<tr>
<td valign="middle" align="center" >
<table id="dvList" style="display: none;" cellpadding="0"
cellspacing="0" style="border: medium none;">
<tr id="tr_img1" style="display:">
<td bgcolor="white" valign="middle"
style="border: solid 1px #6699CC; padding-top: 2px;
padding-bottom: 2px; width: 20px;" align="center">
<img alt="image1" src="rub_black01_pc.gif"
onclick="javascript:setImage('rub_black01_pc.gif','1');" />
</td>
</tr>
<tr id="tr_img2" style="display:">
<td bgcolor="white"
style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
padding-bottom: 2px;" valign="middle" align="center">
<img alt="image2" src="rub_blue01_pc.gif"
onclick="javascript:setImage('rub_blue01_pc.gif','2');" />
</td>
</tr>
<tr id="tr_img3" style="display:">
<td bgcolor="white"
style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
padding-bottom: 2px;" valign="middle" align="center">
<img alt="image3" src="rub_blue02_pc.gif"
onclick="javascript:setImage('rub_blue02_pc.gif','3');" />
</td>
</tr>
<tr id="tr_img4" style="display:">
<td bgcolor="white"
style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
padding-bottom: 2px;" valign="middle" align="center">
<img alt="image4" src="rub_darkblue01_pc.gif"
onclick="javascript:setImage('rub_darkblue01_pc.gif','4');" />
</td>
<tr id="tr_img5" style="display:">
<td bgcolor="white"
style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
padding-bottom: 2px;" valign="middle" align="center">
<img alt="image5" src="rub_darkblue02_pc.gif"
onclick="javascript:setImage('rub_darkblue02_pc.gif','5');" />
</td>
</tr>
<tr id="tr_img6" style="display:">
<td bgcolor="white"
style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
padding-bottom: 2px;" valign="middle" align="center">
<img alt="image6" src="rub_darkblue03_pc.gif"
onclick="javascript:setImage('rub_darkblue03_pc.gif','6');" />
</td>
</tr>
<tr id="tr_img7" style="display:">
<td bgcolor="white"
style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
padding-bottom: 2px;" valign="middle" align="center">
<img alt="image7" src="rub_darkgreen01_pc.gif"
onclick="javascript:setImage('rub_darkgreen01_pc.gif','7');" />
</td>
</tr>
<tr id="tr_img8" style="display:">
<td bgcolor="white"
style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
padding-bottom: 2px;" valign="middle" align="center">
<img alt="image8" src="rub_darkgreen02_pc.gif"
onclick="javascript:setImage('rub_darkgreen02_pc.gif','8');" />
</td>
</tr>
<tr id="tr_img9" style="display:">
<td bgcolor="white"
style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
padding-bottom: 2px;" valign="middle" align="center">
<img alt="image9" src="rub_green01_pc.gif"
onclick="javascript:setImage('rub_green01_pc.gif','9');" />
</td>
</tr>
<tr id="tr_img10" style="display:">
<td bgcolor="white"
style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
padding-bottom: 2px;" valign="middle" align="center">
<img alt="image10" src="rub_green02_pc.gif"
onclick="javascript:setImage('rub_green02_pc.gif','10');" />
</td>
</tr>
<tr id="tr_img11" style="display:">
<td bgcolor="white"
style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
padding-bottom: 2px;" valign="middle" align="center">
<img alt="image11" src="rub_grey01_pc.gif"
onclick="javascript:setImage('rub_grey01_pc.gif','11');" />
</td>
</tr>
<tr id="tr_img12" style="display:">
<td bgcolor="white"
style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
padding-bottom: 2px;" valign="middle" align="center">
<img alt="image12" src="rub_grey02_pc.gif"
onclick="javascript:setImage('rub_grey02_pc.gif','12');" />
</td>
</tr>
<tr id="tr_img13" style="display:">
<td bgcolor="white"
style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
padding-bottom: 2px;" valign="middle" align="center">
<img alt="image13" src="rub_yellow01_pc.gif"
onclick="javascript:setImage('rub_yellow01_pc.gif','13');" />
</td>
</tr>
<tr id="tr_img14" style="display:">
<td bgcolor="white"
style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
padding-bottom: 2px;" valign="middle" align="center">
<img alt="image14" src="rub_yellow02_pc.gif"
onclick="javascript:setImage('rub_yellow02_pc.gif','14');" />
</td>
</tr>
<tr id="tr_img15" style="display:">
<td bgcolor="white"
style="border: solid 1px #6699CC; width: 20px; padding-top: 2px;
padding-bottom: 2px;" valign="middle" align="center">
<img alt="image15" src="rub_orange01_pc.gif"
onclick="javascript:setImage('rub_orange01_pc.gif','15');" />
</td>
</tr>
</tr>
</table>
</td>
<td></td>
</tr>

</table>
</td>
</tr>
<tr>
<td colspan=3><p>This is a following row...
</td></tr>
</table>
</body>
</html>

modified on Saturday, December 11, 2010 7:43 AM

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

JavaScript Image Combobox

Introduction

Using the code

License

Comments and Discussions