javascript onMouseOver Issue

[naveenkongati]

Hi,
I am designing a calender which should display a relevent image onmouseover the link in a div.Suppose if a table has 5 links then 5 different images should be displayed in the the div.Kindly help me out.
I have uploaded the files. Please go through it and suggest me about the modifications needs to be done as per the requirement.
Thanks & Regards in advance

[Dormilich]

use the CSS pseudo-class :hover

[naveenkongati]

pls give a relevant link which has the code

[Dormilich]

a relevant link
: )

[VipinKB]

Hello Navin,

Do the following in your code to make it work:

1. Give id to image tag

<img id="imgPIC"/>

2. Use the below modified javascript function:

function showImg(picName){    
    document.getElementById('PopUp').style.display='block';
    document.getElementById('imgPIC').src = "pics/" + picName + ".jpg";
}
 
function hideImg(){
    document.getElementById('PopUp').style.display='none';
document.getElementById('imgPIC').src = "";
}

3. Call ShowImg function by passing date as paramter:

<a href="javascript:void(0)" onMouseOver="showImg('5')"  onMouseOut="hideImg()">5</a></td>

4. And the last and the most important thing... you need to rename your images as dates depending on what image you want to display for that date in DIV.
So for e.g. republic day image should be renamed as 26.jpg
and call showImg function as showImg('26').
And this would display republic day image in DIV.


Hope this helps.

Thanks,

[Dormilich]

comments

2. the element bearing the id "PopUp" must be block level element (p, div, li, …), otherwise your layout may break.

3. onMouseOver (i.e. attributes in Camel Case) may not be supported by some browsers, use the lowercase attribute onmouseover instead. the same applies to the Javascript event properties (Element.onclick, etc.)

[naveenkongati]

First of all Many Many Thanks for your support. I have implemented your idea and made my entire application ready and it is working fine now.
Another small issue related to the same application, now i am using absolute position for the DIV PopUp. Is it possible to make this as relatvie position according to the screen height & width?Also Dynamically change the DIV
bgcolor.Is it possible?
- Cheers

[Dormilich]

Is it possible to make this as relatvie position according to the screen height & width?

according to my resource, you can use percentage units.

Also Dynamically change the DIV bgcolor. Is it possible?

sure, change the backgroundColor property as desired.

[naveenkongati]

Now i am able to change background color property.Need some help on positioning DIV according to the mouse position.

[naveenkongati]

Now I could manage the position of the DIV also. Finally one more thing , can we provide multiple image type(.jpg/.gif) facility for this application. If it is what are the changes we need to make?

[Dormilich]

HTML does not care about image types. all it needs is a valid URL to the image.

[naveenkongati]

I agree with your point. In this case we are hardcoding ".jpg". If I want to include .gif/.bmp what change need to be done in js file

[Dormilich]

include the file extension in the picture’s name (aka. pass the complete file name)