The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> How to make images float over other images?
Mammoth
post Jul 6 2008, 12:45 PM
Post #1





Group: Members
Posts: 3
Joined: 6-July 08
Member No.: 6,079
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 6 2008, 01:08 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Can you post the URL to a sample page, please? Since the images are essential here, it's easier i we can see them. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mammoth
post Jul 6 2008, 03:55 PM
Post #3





Group: Members
Posts: 3
Joined: 6-July 08
Member No.: 6,079
ok here are samples:

Attached Image is the starting image
Attached Image 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 tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mammoth
post Jul 7 2008, 03:14 PM
Post #4





Group: Members
Posts: 3
Joined: 6-July 08
Member No.: 6,079
missread, thought u just wanted pictures, wel i dont have a web host yet so i cant link a sample page :\
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 02:26 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC