Member Avatar for abhymax

:icon_smile: hello everyone ! .. I am Abhinab Roy. I am new to this Place and I am very glad to be here. I am pursuing a course called Diploma in Multimedia & Animation. :(I have a exam on 17th Nov. .. and I have a problem in Javascript. We have been told to make a javascript code that will do the following :
i) there will be image
ii) the image will previously be dark or black
iii)Whenever the mouse will be rolled over it the place where the cursor is should be illuminated so that the image can be seen clearly.

:'(someone please please help me out or atleat give me a hint.
I will be in your debt.........
Plzzz Someone help me out

  • 2 Contributors
  • 4 Replies
  • 83 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by abhymax
Member Avatar for Graphix

Hi, you can try this:

1. Make 2 images using a image editor (PhotoShop or something like that), one is a bit darker as the other (for example: darkImg.jpg and lightImg.jpg)
2. Use the onmouseover and onmouseout events to show the lighter version when someone scrolls over and the darker version when not (and by default the dark image) (see code below)

<img src="darkImg.jpg" onmouseout="this.src='darkImg.jpg'" onmouseover="this.src='lightImg.jpg'" alt="An Image" title="Scroll over to illuminate" />

~G

Edited by Graphix because: n/a
Member Avatar for abhymax

Hello! Graphix ........... thanks a lot for the code ........ but this code illuminates the whole image ...... i needed to illuminate only that portion of the iamge upon which the cursor falls .. i.e. as you move over the mouse the place where your cursor is will get illuminated , means a definite area surrounding the cursor that may be a rectangle or circle or polygon should be illuminated ......... anyways thanxx a lot for ur concern


:'(I still need help!

Member Avatar for Graphix

Ok, i have been thinking, and this is the script I came up with. Please not: this takes a gigantic amount of memory and your browser can stop if you make the onclick in to onmouseover or if you spamclick on the image.

Anyway here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hiding an image</title>
<style type="text/css">

</style>
</head>
<body>
<script type="text/javascript">
//
// This script only works in Firefox, i recommend you make a img
// with the name sun.bmp and 84x84 size
//
var height = 84;
var width = 84;
function lightImg(event) {
// Retrieving the posx and posy of the mouse
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("container").offsetLeft;
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("container").offsetTop;
// Making all the pixels black
for (var a = 0; a < height; a++) {
for (var s = 0; s < width; s++) {
document.getElementById(a + '-' + s).style.display = "inline";
}
}
// Making a square of 40 by 40 not displayed
var leftside = pos_x - 20;
var rightside = pos_x + 20;
var topside = pos_y - 20;
var underside = pos_y + 20;
for (var d = leftside; d < rightside; d++) {
for (var z = topside; z < underside; z++) {
document.getElementById(z + '-' + d).style.display = "none"; // Dont ask me why it is z d and not d z, it doesnt work with d z???
}
}
}

// Making the pixels that are black
function createBlack() {
for (var h = 0; h < height; h++) {
for (var w = 0; w < width; w++) {
document.write('<div style="z-index:2; display:inline; width:1px; height:1px; position:absolute; top:' + h + 'px; left:' + w + 'px; background-color:black;" id="' + h + '-' + w + '"></div>');
// alert("h:" + h + " w:" + w);
}
}
}
</script>
<div id="container" style="position:absolute; left:50px; top:50px; width:84px; height:84px;" onclick="lightImg(event)">
<script type="text/javascript">
createBlack();
</script>
<div id="img2" alt="Img2" style="z-index:1;height:84px; width:84px; position:absolute; left:0px; top:0px; background:url('sun.bmp');" />
</div>
</body>
</html>
Member Avatar for abhymax

hey graphix ! . thanxxxxxxxxx a lot man
its working in firefox
thank u very much
if i can be of any help to you let me know
and i am trying to devolop on these code and modify it
or to amke something simpler coz the place where i will be giving my exam has only IE 6 as browser but they got 4 gbram
anyways thanx a lot again Graphix
i am in ur debt

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.