Solved

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

Posted on 2003-11-11
3
154 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
  • 2
3 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 30 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

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

Turn A Profile Picture Into A Cartoon Using Photoshop And Illustrator This tutorial will teach you how to make a cartoon style image out of a regular picture. I have tried to keep the tutorial as simple as possible. I used Adobe CS4 for this tuto…
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 update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…

809 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