Hello!
Ive been working on a website for a few days now, and i wanted to make a cool button frame.
Ill describe what i have and what the problem is before posting my code:
I now have a bunch of buttons on the left side of my screen, the buttons are images with for instance 'Home' written on them.
On mouseover the image turns into a larger image giving more information on the page.
The problem im having is that when the image turns into a larger image, all the other images around it get pushed away.
Might there be a way for me to make the expanded image float over the other?
Now heres my code, the red part is the code for 1 button, it will be repeated but with different names ('home', 'about' etc.) for multiple buttons.
<html>
<head>
<script TYPE="text/javascript">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.
var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}
function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}
function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</SCRIPT>
</head>
<body background='uomenuback.jpg'>
<A
HREF="agontimesmain.htm" target='showframe'
onMouseOver = "rollover('home')"
onMouseOut = "rollout('home')"
><IMG
SRC="closedscroll1.jpg"
NAME="home"
ALT="Home" BORDER=0
></A>
<script TYPE="text/javascript">
<!--
setrollover("openedscroll1.jpg");
//-->
</SCRIPT>
Full Version: How to make images float over other images?
Can you post the URL to a sample page, please? Since the images are essential here, it's easier i we can see them. 
ok here are samples:
Click to view attachment is the starting image
Click to view attachment is the mouseover image
I admit they need some work xD
made them in paint, but im having some friend draw better ones for me soon
Click to view attachment is the starting image
Click to view attachment is the mouseover image
I admit they need some work xD
made them in paint, but im having some friend draw better ones for me soon
missread, thought u just wanted pictures, wel i dont have a web host yet so i cant link a sample page :\
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.