Click here to Skip to main content
15,891,204 members
Search within:


Articles / Web Development / XHTML
 
Article

JavaScript Image Combobox

Rate me:
Please Sign up or sign in to vote.
2.50/5 (3 votes)
28 May 2009CPOL 38.7K   397   10   5
A combobox which contains images and can be added in anywhere.

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.

  1. First one for displaying a combo box like structure:
    2. 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>
  2. 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.
    3. 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 Singapore
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
First Prev Next
GeneralMy vote of 1 Pin
Tomas Rapkauskas3-May-11 13:48
Tomas Rapkauskas3-May-11 13:48 
GeneralMy vote of 1 Pin
arunartzoom25-Mar-11 1:51
arunartzoom25-Mar-11 1:51 
GeneralThis version is working in IE and Firefox [modified] Pin
flu_and11-Dec-10 1:37
flu_and11-Dec-10 1:37 
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;">
<!-- <tbody> -->
<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>
<!-- </tbody> -->
</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
Generalnot working in firefox2.0 Pin
zefzefzergegergerg9-Jun-09 22:54
zefzefzergegergerg9-Jun-09 22:54 
GeneralCode is not working in FireFox 2.0 and Chrome Pin
Patel Maulik1-Jun-09 20:09
Patel Maulik1-Jun-09 20:09 
Last Visit: 31-Dec-99 18:00     Last Update: 3-May-24 20:42Refresh1

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

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

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 28 May 2009

Article Copyright 2009 by Subrata Mohanta
Everything else Copyright © CodeProject, 1999-2024

Web01 2.8:2024-04-02:1