Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Can I make some buttons that do a little something???

Posted on 2003-11-11
3
Medium Priority
?
159 Views
Last Modified: 2013-12-24
I have a FP framed page.
In the upper (top) frame, there is an image containing a logo, some words and some buttons. The buttons are just part of the bit-map and I can make them fire off a web page by mapping the bit-map, but I wondered if there was a way to give them a little more pizzaz.
I'd like them to have rollover and on-click events somehow.
I can't put buttons on top of the image (not allowed).
Any thoughts?
0
Comment
Question by:rbender
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 120 total points
ID: 9732361
You can use div's for this to show and hide images on top of your image map, and use the onclick event for the function. Here's an example:

<html>
<head>
<title>ImageMap Rollover</title>
<script language="JavaScript">
<!--
function show(layerid) {
  if (document.all){
    layerid.style.visibility="visible"
    }
  else
  if(document.layers){
    layerid.visibility="show"
    }
  }
function hide(layerid){
  if (document.all){
    layerid.style.visibility="hidden"
    }
  else
  if(document.layers){
    layerid.visibility="hide"
    }
  }
//-->
</script>
</head>
<body>
<img src="images/myimage.gif" border="0" usemap="#imagemap1" width="200" height="100">
<map name="imagemap1">
<area shape="rect" coords="0,0,100,100" href="page1.html" onMouseover="show(image1);" onMouseout="hide(image1);" onClick="somefunction();">
<area shape="rect" coords="100,0,200,100" href="page2.html" onMouseover="show(image2);" onMouseout="hide(image2);" onClick="somefunction();">
</map>

<div id="image1" style="position:absolute;l eft:0;top:0; visibility:hidden; width:100px; height:100px;">
<img src="images/myimage2.gif" border="0" width="100" height="100">
</div>

<div id="image2" style="position:absolute; left:100;top:100; visibility:hidden; width:100px; height:100px;">
<img src="images/myimage3.gif" border="0" width="100" height="100">
</div>
</body>
</html>
0
 

Author Comment

by:rbender
ID: 9732953
Good Stuff...thanks
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9733117
You're welcome, and thanks.
0

Featured Post

Free learning courses: Active Directory Deep Dive

Get a firm grasp on your IT environment when you learn Active Directory best practices with Veeam! Watch all, or choose any amount, of this three-part webinar series to improve your skills. From the basics to virtualization and backup, we got you covered.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
This guide will walk you through the essential considerations and tech stack for building scalable websites. Know how to grow your business the smart way!
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question