CSS image changes

@JMRKERJul 18.2006

Well, I didn’t have much success in reply quanity when I posted a similar question
on the ‘javascript’ forum, so I guess I’ll try another approach to the CSS experts … 😮

To Anyone with more knowledge than me:

Is it possible to use CSS and the javascript onMouseOver function as follows?

Display an image (jpg) under a mask of one uniform (black) color.
(Possibly using the ‘layers’ function in CSS element?)
OR
(Use two <DIV> tags and absolute position one on top of the other)

When the mouse moves over the masked image, a portion of
the underlying image is displayed, ie like looking through a
circular or square ‘keyhole’.
(Possibly using a XOR command in a scanning function)
OR
(Possibly using the transparent background style?)

In other words, can I position both the image and black mask to the same
position on the screen and somehow reveal the underlying image
by altering a portion of the mask?

3. Later, I would also like to know where the mouse is located (x,y)
while scanning the image through the keyhole, but I don’t initially need this.

I have seen this in ‘java’, but the source is not available for me to use.

Any thoughts on my problem or leads to a solution are appreciated.

to post a comment

CSS

9 Comments(s) _↴

@AlbatrossJul 18.2006 — #You mean something like this?

[url=http://www.webbedenvironments.com/dhtml/code/18_NavigationControls/FollowMouse/index.html]Follow the Mouse[/url] (you want the [url=http://www.webbedenvironments.com/dhtml/code/18_NavigationControls/FollowMouse/index1.html]flashlight[/url] example)

@JMRKERauthorJul 18.2006 — #Perfect. Thank you 'Albatross' ?

Looks like what I want.

I may be back to ask questions about implementation

as I have a very steep learning curve ahead.

BTW, How did you find this? I must have googled every graphic term I could think of.

I posted for two days on the JS forum and received no comments.

Again, thank you very much.

@AlbatrossJul 18.2006 — #It's in the book [u]DHTML and CSS for the World Wide Web Visual Quickstart Guide (3rd Edition)[/u] by Jason Cranford Teague (Peachpit Press). Check it out (along with [u]JavaScript for the World Wide Web Visual Quickstart Guide 5th Edition[/u] by Tom Negrino and Dori Smith, also from Peachpit Press) from your local library (so you don't have to pay for either book).

@JMRKERauthorJul 18.2006 — #OK, I fibbed. It's almost perfect.

I said I might be back for additional information.

First off, I found the book and yes it is a wealth of information.

Second, this is what I want to do different:

The existing program displays underlying text as the spotlight is passed over the body

This is a neat effect and I intend to use this later, but...

What I would like to do is expose an image.jpg as the spot moves.

Just like exposing the text, but expose the image instead.

(Note: the images referenced below are nothing special, just .jpg or .gif images for testing.)

To this "END", here are the "MEANS" I have tried to no avail.

1. I tried reversing the z-index of the #spotlight and #content

in the CSS definitions. I see no effect at all, so I put them back.

<i>
 </i>#spotLight {
 position: absolute;
 z-index: 0; 
 /*	z-index: 100; */
 top: 20px;
 left: 20px
 }
 
 #content {
 font: bold 50px cursive,MSComic,sans-serif;
 position: absolute;
 z-index: 100; 
 /*	z-index: 0; */
 top: 100px;
 left: 100px
 }

2. I tried putting the image as a background in the body in the CSS definitions.

The effect was to show the image within a black screen, ie: not hidden under the black.

It also was cut off at the top-center of the screen. I thought it would be centered lateral & vertical.

<i>
 </i>body {
 color: black;
 /*	background-color: black; */
 background: black url(http://www.nova.edu/~rumsey/pics/minnie.jpg) no-repeat center center; 
 cursor: none
 }

3. I tried putting the image within the <div> of the HTML.

This too shows the images (both .jpg and .gif), ie: not hidden.

In one case the spot moves over the CSS image but under the HTML image.

<i>
 </i>&lt;div id="content"&gt;
 Are you afraid of the dark?
 &lt;p /&gt;&amp;nbsp;
 &lt;p /&gt;
 Sleep in the sunshine.
 &lt;!--
 &lt;img src="minnie.jpg" /&gt;
 --&gt;
 &lt;img src="BanrBird.GIF" /&gt;
 
 &lt;/div&gt;

I am going to evaluate the other scripts to see if they could be modified to do what I want. See earlier post to view links,

Albatross You mean something like this?

Follow the Mouse (you want the flashlight example)
[/quote]
but does anyone see the errors of my ways? Any other suggestions to try?

Is there a simple change or is it some combination of the attempts so far.

I am so close to success I can taste it so I hate to give up yet.

My latest attempt is located at: http://www.nova.edu/~rumsey/pics/spot1.html

but I can't guarantee it won't change as I try other things.

@JMRKERauthorJul 22.2006 — #Well, I'm back and still haven't solved my problem. :o

I want to try making the 'spotlight.gif' transparent by making a 'spotlight.png' file. This is similar to the 'crossHair' script in the 'follow the mouse' example above.

Does anyone know where I can find a script to translate a '.gif' file to a '.png'. file and make one of the colors (the white section only) transparent?

My thoughts are to let the underlying image (.jpg) show through the transparent section of the spotlight.

I don't know if this will work, but I can't try without solving the transparency problem.

Is it possible to use CSS to perform the same function?

Any other ideas on the original/modified topics above are appreciated. ?

@AlbatrossJul 22.2006 — #You need to use a graphics program to change file formats. Adobe (formerly Macromedia) Fireworks, Adobe Photoshop (or its lighter cousin, Photoshop Elements), Corel (formerly JASC) Paint Shop Pro, or [url=http://www.gimp.org]The GIMP[/url] (The [b]G[/b]NU [b]I[/b]mage [b]M[/b]anipulation [b]P[/b]rogram).

All of the above programs (save for The GIMP) will cost you an arm, leg and your first born child (just kidding, but they are pretty pricy, at least $100). The GIMP is (essentially) a clone of Photoshop, but without the price tag (it's FREE).

Btw, .jpg files cannot show transparency. Only .gif and .png can.

@JMRKERauthorJul 22.2006 — #Thanks for the info albatross, ?

I teach, so I'll be looking into the GIMP. That is a Linux application, true?

Also, what I'm trying to do is show an underlying '.jpg' image that has essentially been covered with a '.gif' or '.png' image with a portion of the covering image being transparent. As I move the overlay, I want to 'see' a portion of the covered image.
Btw, .jpg files cannot show transparency. Only .gif and .png can.
[/QUOTE]
So does your statement still apply for what I'm trying to do or do I need to convert the underlying image to a '.png' as well? ?

Thanks for all your helpful knowledge on this project.

@AlbatrossJul 22.2006 — #The GIMP was originally developed for Linux, but has since been ported over to both Windows and Macintosh OS as well.

You can safely ignore my previous statement about the image types then, if you're going to apply a .png file with transparency over the .jpg. Just be sure to save the PNG file as PNG-8, or else Internet Explorer <7 will show an ugly background color instead of the transparency.

@pathfinder74Jul 27.2006 — #You mean something like this?

[url=http://www.webbedenvironments.com/dhtml/code/18_NavigationControls/FollowMouse/index.html]Follow the Mouse[/url] (you want the [url=http://www.webbedenvironments.com/dhtml/code/18_NavigationControls/FollowMouse/index1.html]flashlight[/url] example)[/QUOTE]

That's cool. I think I've seen it before but it never gets old.

Also in #CSS _↴

IE Prob (99% of my posts are about IE :@ )Need Help Centering an Image within a Elastic Div input type text and css

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This

CSS image changes

9 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS image changes

9 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #CSS _↴