I recently stumbled upon an interesting dilemma whilst using an image map that was dynamically generated from a Coldfusion Query. If you turn JavaScript off, then the image maps primary graphic still stays visible (and occupies the same space on a page), but none of the map links function anymore.
The problem was to replace the map content with a list of hyperlinks that provide the same functionality. Initially I set the maps div CSS to be hidden. In this way the map is not shown by default.
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
// css
.interactiveMap {visibility: hidden;}
1// css
2.interactiveMap {visibility: hidden;}
Next we can use a JavaScript call to change the CSS visibility to 'visible'. In this way if JavaScript is disabled the graphic remains hidden, if JavaScript is enabled it turns in on.
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<s/cript>
// show the map
document.getElementById('interactiveMap').style.visibility = "visible";
</s/cript>
1<s/cript>
2 // show the map
3 document.getElementById('interactiveMap').style.visibility = "visible";
4</s/cript>
Lastly we can create the content that we want to see instead of the map. Don't forget to wrap it all in the no script html tag.
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<noscript>Your browser does not support JavaScript!
<p></p>
<!--- get the regions list --->
<cfset variables.regions = getRegions()>
<ul>
<cfloop query="variables.regions">
<li><a href="region.cfm?region=#variables.regions. regionid#">#variables.regionName#</a></li>
</cfloop>
</ul>
</noscript>
1<noscript>Your browser does not support JavaScript!
2<p></p>
3
4<!--- get the regions list --->
5<cfset variables.regions = getRegions()>
6
7<ul>
8<cfloop query="variables.regions">
9<li><a href="region.cfm?region=#variables.regions. regionid#">#variables.regionName#</a></li>
10</cfloop>
11
12</ul>
13</noscript>
By altering the css properties like this we can have the map and the no script content occupy the same real estate on the screen. If you simply populate the no script with the alternative, then the space the map occupies stays occupied, just by a hidden map, giving you a large blank space.
There are no comments for this entry.
[Add Comment] [Subscribe to Comments]