Solved

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

Posted on 2003-11-11
3
155 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In this short web based tutorial, I wanted to show users how they can still use the powers of FrontPage in conjunction with Expression Web 3.  Even though Microsoft eliminated the use of Web components, we can still use them with FrontPage and edit …
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…
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

856 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