Splitting an image

Forum Moderators: open

Message Too Old, No Replies

Splitting an image

adni18

1:17 am on Nov 16, 2004 (gmt 0)

Is there a way to, in javascript, get independent parts of an image and display them as a regular image, but be able to change it? An example would be a 200px wide image. Would there be a way, maybe with javascript/css to display each half of the image as if they were regular images. I tried doing clipping with css, but there is still a 100px blank spot to the left of the second half. I appreciate any help I can get!

adni18

1:18 am on Nov 16, 2004 (gmt 0)

Cool. I'm a full member now. Yipee! However, I still need help.

Lance

4:09 am on Nov 16, 2004 (gmt 0)

Well, let's say your image is 200x200. You could use each half of it as a background and place it how ever you want.

#ImgLeft
{
WIDTH: 100px;
HEIGHT: 200px;
BACKGROUND: url(TheImage.gif) no-repeat left top;
}

#ImgRight
{
WIDTH: 100px;
HEIGHT: 200px;
BACKGROUND: url(TheImage.gif) no-repeat right top;
}

But you'll need a transparent "Blank.gif" to fill out the foreground.

<full member>
CONGRATULATIONS!
I made Full Member a week or so ago. It took a few days and then the prizes and "secret passwords" started showing up.
</full member>

Bernard Marx

10:13 am on Nov 16, 2004 (gmt 0)

Prizes and secret passwords?
Where are mine? What am I doing wrong?

adni18

1:12 pm on Nov 16, 2004 (gmt 0)

I really want to do something with clipping. I can alter the clip with javascript, but I still get a 100px margin on the left.

SimplyPut

12:37 am on Nov 17, 2004 (gmt 0)

Try this:

Rambo Tribble

4:50 pm on Nov 17, 2004 (gmt 0)

I think this demonstrates what you want, first showing individual halves, then the combination:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="position:relative;height:80px;">
<div style="position:absolute;clip:rect(0 100px 60px 0)">
 <img src="your_200x60_Image.gif" alt="" />
</div>
</div>
<div style="position:relative;height:80px;">
<div style="position:absolute;clip:rect(0 200px 60px 100px)">
 <img src="your_200x60_Image.gif" alt="" />
</div>
</div>
<div style="position:relative;height:80px;">
<div style="position:absolute;clip:rect(0 100px 60px 0)">
 <img src="your_200x60_Image.gif" alt="" />
</div>
<div style="position:absolute;clip:rect(0 200px 60px 100px)">
 <img src="your_200x60_Image.gif" alt="" />
</div>
</div>
</body>
</html>