This is a ‘Can I do this?’ question.

@JMRKEROct 30.2007

I found this site: ~~[url]~~http://www.dhtmlcentral.com/script/script.asp?id=27[/url]
and it does quite a bit of what I want, except:

Is it possible to use a ‘jpg’ image in the body (or some other element like ‘div’ that I could position)
to become exposed as the ‘spot’ is passed over the image?

I works find for text in the body, but I don’t know enough to know if this is possible to expose the image,
or if I’m even asking the right question to accomplish this task with a ‘jpg’ or even ‘gif/png’ image.

But, here goes:
1. Should I try to use the z-index parameter on several overlapping ‘div’ blocks?
2. Should I try to use some form of ‘transparent’ statement in the mask or background image?
3. Is there some other variation of CSS/javascript code to use to display portions of the image while the mouse is tracked?
4. Is there another site anyone would know of that would give me more information on this topic?
I’ve tried a ‘google’ search, but using ‘spotlight’ as a search term is not specific enough.
5. Any thoughts on this or should I post to another section (CSS or JS) of the forum?

Thanks for any advise or opinions in advance.

to post a comment

13 Comments(s) _↴

@harumphOct 31.2007 — #The link you furnished is broken. You need hot spots on an image that will then display an image at the cursor? Not sure what you're looking for.

Are you simply looking for something like this?

There a many examples of magnifying glass effects using Flash and DHTML. (fyi)

@JMRKERauthorOct 31.2007 — #'harumph': Thanks for the response.

Sorry, I don't know what the problem is with the posted link as it seems to work fine for me. ?

However, the site I found was from 'DHTMLCentral.com'

The higher link is: http://www.dhtmlcentral.com/script/

and I'm trying to use the 'Spotlight' script located about 5 bold headings from the top.

I used the 'View Demo' and 'Info and download' links within the page

(NOT the bolded 'Spotlight' link as this does not appear to work)

As I indicated, the script works fine for revealing background text, but I'm trying to do a similar function with a graphic image (jpg is my first choice but I could also work with gif, png or something) hidden beneath the spotlight as it moves with the mouse. I just don't know what kind of terminology to use to search with and find out how I could accomplish the task.

I've seen the baloon popups, but this is not what I'm trying to do.

Anyway, thanks again for the response. ?

Any other ideas or suggestions are most welcome.

@harumphOct 31.2007 — #Oh. You mean here: http://www.dhtmlcentral.com/script/script27_demo.html

It took me a bit to actually find it. The links you give redirect to aN HTTP 404 PAGE NOT FOUND.

BTW, this script does not work in IE (not that anyone on this site cares).

It is a very easy process in Flash.

@harumphOct 31.2007 — #Add this line to their script:
this.ie6=(this.ver.indexOf("MSIE 7")>-1 && this.dom && !this.opera5)?1:0;
& it'll work in IE7.

Oh, and it does hide an image behind it.

@harumphOct 31.2007 — #Put a background image inside #divExCont in that stylesheet and try it.

I made a png instead of the gif. It gives a very nice transparency effect.

Image:

[ATTACH]9862[/ATTACH]

Try it.

[upl-file uuid=1b385332-a277-4274-856e-e0efc1433983 size=24kB]spotlight_circle.png[/upl-file]

@JMRKERauthorOct 31.2007 — #'harumph',

Thanks for the double post. I have been using FF on my PC at home and an iMac at work, so I was not aware that it was not working in IE, but I'll change the script anyway. I assume the link is bad because it had been originally posted back in 2001, but it still does not give me a 404 error when I click on it from this forum posting. Wierd! :eek:

I guess I don't see how it works with an image though. There is a graphic in the upper left of the demo page that becomes hidden when the spot is passed over it (that is at least in FF). I'll modify the code with some other image displays in the body of the HTML and report back on my success (or lack thereof). ?

Plus, I'm off to the library tomorrow to see what 'Flash' will do for me as I have not used this program. I know that there are free downloads to display the creations of the program, but I have not used the program for any creations of my own as of now. Do you know if the PC and/or Mac versions are more compatible than some scripts I have found for FF and IE browsers? ?

@harumphOct 31.2007 — #Probably still in your cache. No worries. Try the png I furnished with their code. It's pretty cool.

I put the image in this way:

[CODE]#divExCont {position:absolute; left:0px; top:0px; clip:rect(0px 0px 0px 0px); layer-background-color:#ffffff; background-color:#ffffff; background-image: url('http://www.blah.com/images/blahblah.jpg')}[/CODE]

You could put a no-repeat in if you want. I like this script. I see some interesting applications for it.

@JMRKERauthorNov 01.2007 — #'harumph':

Haven't forgotten the help you've given so far, just putting it all together.

I try to put up a non-local link tomorrow.

In the meantime: ?

You were right, I can use a 'jpg' image which works great for my needs.

And I like the fuzzy edges of the 'png' circle better than the original 'gif' version. Plus I've figured out how to change the size of the circle should the need arise when I need to change the image size.

Couple of things I'm currently working on trying to solve are:

1. It appears that

[code=php]
  layer-background-color:#ffffff; /* does not seem to work in FF */
 background-image: url('http://www.blah.com/images/blahblah.jpg')
 /* having trouble controlling physical size of valid image as background */
 [/code]

doesn't work right in FF where I get errors in the console.

I have altered the display by using an <img src='' height='yy' width='xx'> tag later in the script and this looks like a work-around.

2. And one last problem is capturing the mouse location while revealing the image. It appears that I can capure the x/y positions OR move the circle to reveal the image, but not BOTH! I think it is a sequence problem with two scripts trying to do something when getting to a <body onload=...> section.

Hopefully, all these problems will be solved after I get a second look at my code.

I'll try to post a link tomorrow after I try a few more things on my own.

So 'harumph', I'm still miles ahead of the problem than before you started helping me. ?

Thanks again. I'll try to post some more later.

@WebJoelNov 01.2007 — #Most of this web page stuff is only 10% science, 25% ingenuity and 65% [I]trying to get the ingenuity to work with the science[/I]... ?

@JMRKERauthorNov 01.2007 — #Well, I'm about 90% there. A whole lot closer to the solution than I was two days ago.

As promised, the current (almost working) version is located at: http://www.nova.edu/~rumsey/spot/Demo.html

All the supplemental files are located in the same directory.

Since I'm in education, I think 'WebJoel' is probably correct.

I know what my goal is, just don't always know how to accomplish it.

The forum has been a boon to my understanding of HTML, JavaScript, CSS and graphics with all the examples I'm able to follow

However, if the moderators feel I should start another thread or go to a different section of the forum, please let me know.

As I expressed in the first post, I was not sure what to ask, let alone who.

With all the help I've been given, perhaps I should define what my final goal is to be.

It will be a research project and teaching aid that will hopefully help my students improve their observation techniques.

I want to display an image with only a portion (the spotlight) illuminated.

My plan is to analyze the search patterns used by beginning and experienced clinicians to evaluate the posterior (the retina) of the eye.

The goofy picture in the demo is only there to keep my interest.

My plan is to collect the x-y positions of the mouse cursor during movement over the portions of the image displayed for a period defined by clicking on a 'Start / Stop' buttons or a set period of time. Then I'll anlayze this information to determine if a more efficient technique can be employed during the evaluation of the retina.

I have about 5 more hoops to jump through, so if you have any ideas about the problems below, feel free to express an opinion.

I have tested using FF and IE on the PC and iMac I use and there seems to be a common problem for the script.

What follows is my best analysis of what problems I have left to solve. They may have incorrect assumptions embedded, so alternate solutions are most welcome. If it becomes a published paper , and you wish credit, I will be glad to acknowledge any help offered ('harumph and WebJoel' or others of forum) if you PM me.

Here are the remaining problems (in order of importance) I have to solve before trying it out on students.

I have embedded some comments into the script that should help show my current understanding.

#1. I want to make the 'spotlight' follow the cursor AT THE SAME TIME I collect the mouse x and y positions. Currently when I click 'Start' the spotlight freezes and the position text boxes work until I click 'Stop' when the reverse again occurs.

I believe this to be some sort of event initialization problem with the 2 different scripts during the 'onLoad=' section. Appears I can get only one event at a time to be recognized.

#2. I plan on collecting the x-y position information using a 'setTimer' or 'setInterval' script.

My assumption is that this is another event to monitor, but I don't want to confuse the problem at this time until I solve #1 above first.

I will probably use a <form> to submit the information.

#3. I would like to hide the mouse cursor (the arrow) while the spotlight is moving and data is begin collected between clicking on the 'Start-Stop' buttons. My thoughts are to monitor the x-y information and display the arrow when the cursor is move outside the searched image area.

Does this seem reasonable?

#4. Reposition the searched image (not the spotlight) to be in the middle of the monitor display rather than the upper left part of the screen. This is a low priority, but would be aesthetically pleasing.

Least bothersome, but would like to know more about:

#5. Why the CSS commands

a. 'layer-background.color' gives me errors in FF browser

and

b. 'background-image' doesn't work for me and if I can get it to work, can I control it's height and width on the display. Don't know if there is an advantage to using this command over the current implementation (?)

Again Thanks to all who look and respond to this post.

At least my learning curve is not so close to vertical as it was before.

jmr

@harumphNov 01.2007 — #This is a very interesting experiment. I believe you should look at Flash. Flash has the capability of collecting data as you are doing now and you can replace your cursor with the masked circle. You could put it anywhere on your page and only capture cursor movement within the Flash presentation.

Take a look at this. and this.

In fact, check out his list of projects.

JIC, remember, if you are trying to see an image in FF, the link cannot reference a drive from your local machine i.e. - url('[COLOR="Red"]c:[/COLOR]folderblah.jpg') The makers of FF are a bit paranoid that way. Use relative paths.

@JMRKERauthorNov 01.2007 — #'harumph':

Thanks for the info.

Gives me more food for thought and another reason to convince my dean for additional expenditures. ?

Also, the url('c:...') reference was never used and is commented out in the code.

I will, however, try to see if it makes a difference when placed on the server. ?

@JMRKERauthorNov 02.2007 — #Well, with some extra 'trial and error', I've managed to solve a lot of my problems from post #11.

I have solved problem #1 by putting the two different onmousemove events into a common function.

For problem #2, I'm using a counter that changes whenever the onmousemove event occurs.

'Flash' is still of interest to me, but as long as I'm making progress, I'll keep plugging away.

Now on to the other problems in post #11 above.

Modified script: http://www.nova.edu/~rumsey/spot/Demo.html

I'm still in the development starge so comments are still most welcome.

Thanks to all forum members for the interest and help!. ?

Success!

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

Tweet This

This is a ‘Can I do this?’ question.

13 Comments(s) _↴

Success!

Social

Version

This is a ‘Can I do this?’ question.

13 Comments(s) ↴

Success!

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

Social

Version

13 Comments(s) _↴