Solved

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

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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The purpose of this video is to demonstrate how to properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp…
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …

751 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