View Full Version : Picture bullets on collapsed lists

07-05-2002, 11:32 AM
<td width="80%" height="261" colspan="2">
<ul dynamicoutline initcollapsed imagesrc="images/logo_bb.gif">
<li>This is a simple list that I have created
<li>it's initially collapsed</li>
<li>and uses a picture bullet for the first item</li>
<li>I want that bullet to change upon list expansion</li>

I didn't make an array because I only need 2 pictures. Also, no css has been used. Can this seemingly simple image swap be painlessly acomplished?

thanks - checker

Haven't heard from anyone yet - I know this can be done, found 2 examples on the web, but when I went to "view source" I couldn't make heads or tales out of it. :confused: HELP PLEASE!

07-06-2002, 03:00 PM

07-06-2002, 04:06 PM
When inserting that code into an HTML, it doesn't seem to work the way it should, at least not using the code you typed in, could you post a link to those sites you mentioned?


07-06-2002, 04:49 PM
Maybe my code isn't working right because I didn't post the whole thing. <shrug>


<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Microsoft Theme" content="none, default">
<meta name="Microsoft Border" content="none, default">
<script language="JavaScript" fptype="dynamicoutline">
function dynOutline() {}
<script language="JavaScript1.2" fptype="dynamicoutline" src="outline.js">
<script language="JavaScript1.2" fptype="dynamicoutline" for="document" event="onreadystatechange()">

<body onclick="dynOutline()" language="Javascript1.2">

<ul dynamicoutline initcollapsed imagesrc="images/DRI.png">
<li>This is a simple list that I have created
<li>it's initially collapsed</li>
<li>and uses a picture bullet for the first item</li>
<li>I want that bullet to change upon list expansion</li>


The sites that I mentioned:


Scroll down to "visual functionality" and click on "Collapsible list areas for ease of content composition" The red up/down arrow changes when the list is expanded/collapsed.

hope that helps, and if you couldn't already tell I know very little about js. just enough to get myself into these messes.;)

07-06-2002, 05:41 PM
try this code - works with all DOM compliant browsers

put this function in a js file of <SCRIPT> section in the HTML header

* Copyright (c) 2002, Vlad Krylov, All Rights Reserved.
function ElementCR(elmntID,iconID)
{ elmnt=document.getElementById(elmntID);
fn = icon.getAttribute('src');
slash=( (fn.lastIndexOf('\\\')>fn.lastIndexOf('/')) ?
fn.lastIndexOf('\\\'): fn.lastIndexOf('/')) + 1;
fn = fn.substring(0,slash);
{ elmnt.style.display='none';
//replace plus.gif with your image of choice
icon.setAttribute('src',fn + 'plus.gif');
{ elmnt.style.display='block';
//replace minus.gif with your image of choice
icon.setAttribute('src',fn + 'minus.gif');

HTML fragment:

<a href="Javascript: ElementCR('ITEM1','ICON1')">
<img src="plus.gif" alt="Expand" id="ICON1">
Title text if any, can also go before the image tag
<div id="ITEM1" style="display:none;">
Insert whatever HTML you want to collapse/expand here

You can have a number of collapsed regions and you can nest them, just provide unique image and division IDs. You can easily modify the function to allow for different images with each collapsable reagion.

Hope that helps.