Click here to Skip to main content
Click here to Skip to main content
Search within:



 
Comments & Discussions (5)

JavaScript Image Combobox

By , 28 May 2009
 

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:

<!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. <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. <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:

/*
* 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)

About the Author

 Subrata Mohanta
Software Developer Emerio (Malaysia) Sdn Bhd
Malaysia Malaysia
Member
Emerio (Malaysia) Sdn Bhd

Article Top
 
Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
Hint: For improved responsiveness ensure Javascript is enabled and choose 'Normal' from the Layout dropdown and hit 'Update'.
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
First Prev Next
GeneralMy vote of 1memberTomas Rapkauskas3 May '11 - 13:48 
GeneralMy vote of 1memberarunartzoom25 Mar '11 - 1:51 
GeneralThis version is working in IE and Firefox [modified]memberflu_and11 Dec '10 - 1:37 
Generalnot working in firefox2.0memberzefzefzergegergerg9 Jun '09 - 22:54 
GeneralCode is not working in FireFox 2.0 and ChromememberPatel Maulik1 Jun '09 - 20:09 
Last Visit: 31 Dec '99 - 18:00     Last Update: 19 May '13 - 0:37Refresh1

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

About Article
A combobox which contains images and can be added in anywhere.
Type Article
Licence CPOL
First Posted 28 May 2009
Views 16,930
Downloads 238
Bookmarked 10 times

, +
Top News

Math Primers for Programmers

Get the Insider News free each morning.
Related Videos
JavaScript Programming - 1901 JavaScript Libraries
JavaScript Programming - 0106 JavaScript Development Tools
Validate AJAX Combobox in ASP.NET using JavaScript
ComboBox Control for ASP.NET
ComboBox WebControl
Image ComboBox Control
Select As You Type Behavior in Internet Explorer Comboboxes
Canvas Control Library and New Forms Based System for building Web Pages and Websites
Create a ComboBox web control with jQuery and ASP.NET
ASP.NET Combobox dropdownlist with Images
Web-Based Image Slideshow using JavaScript
ASP.NET MVC Server Explorer (Part 2)
Thumbnail Image Viewer Control for ASP.NET 2.0
iPhone ComboBox
Horizontal scroll bar in a combo box or a listbox with up/down arrow key press functionality
Windows Ribbon for WinForms, Part 8 – ComboBox
Extended ListView
Implementing an OwnerDrawn ComboBox
How to Display Images in ComboBox in 5 Minutes?
Extracting Embedded Images From An Assembly
BitmapPickerComboEx - A Nice Looking Combo Box with Sections
Multi-column dropdown combobox - an ASP.NET 2.0 server control
Permalink | Advertise | Privacy | Mobile
Web04 | 2.6.130516.1 | Last Updated 28 May 2009
Article Copyright 2009 by Subrata Mohanta
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid