Hover over image - Size, Positioning

__plec__ · 26-01-2010 3:26pm #1

Hey all,im back,thanks to all who helped with my last query,have that hover over menu sorted,look exactly as i want and works in all web browsers,so thanks a mil.

However,this question is quite similar,basically i have a row of images set up and wanted to get a bigger image to appear using 'mouse over'. This ive done by putting a html tag over each image as a transparent box.This all works perfectly.

Only problem is that the position of the image which appears,and the size of the image,cannot be changed for some reason.In my previous menu this was not a problem,and since im using a very similar code it doesnt make sense that it's not working.Most likely there is a simple error which im just not seeing.Any help would be greatly appreciated,thanks

Here is what im using

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<title>Image Hover</title>
<script type="text/javascript">
function Show_Image(IDS) {
document.getElementById(IDS).style.display = "block";
}
function Hide_Image(IDS) {
document.getElementById(IDS).style.display = "none";
}
</script>
</HEAD>
<BODY><a href = “1.html”
onMouseOver="Show_Image('Img3');" onMouseOut="Hide_Image('Img3')"> <small>

<table border=0 ="opacity:0.4;filter:alpha(opacity=40)"width=90 height=65>
<tr><td></td></tr>
</table>

</small></br></a>

<span id="Img3" style="display:none">
<div

style="

top: 50;
right: 200;
position: absolute;
z-index: 1";
object.style.visibility="visible""><img src="3.jpg" title="3.jpg" width="200" height="160" hspace="10" vspace="10" align="left" border="0" </div></span>

</BODY>
</HTML>

The parts in red are the bits that dont seem to work,no matter what values i enter there is no change

__plec__ · 26-01-2010 4:04pm

here is an image of what the webpage will look like.As you can see ive a menu of thumbnails at the bottom,with the idea that when the mouse hovers over each one the image will appear larger in the centre.Ive set it up using a simple webdesign program,with my intention of placing an invisible box,using html, over each image to activate the mouse over.

As i said i have it all working,can get the images to appear larger,only problem being ive no control over the position of the image and the image size.

Thanks

Liam Byrne · 26-01-2010 6:16pm

Firstly, why do you have a span around the div ? There's no need for it. Simply give the div the ID and the style that the span has.

Secondly, the code

object.style.visibility="visible"

has no purpose, and may even be causing the JavaScript to fail

Thirdly, the position and size can be set using the bits of code that you highlighted in red. I would, however, make the position of the overlay div relative rather than absolute.

__plec__ · 27-01-2010 11:35am

thanks Liam for the advice, i implimented your changes so my html was much tidier.However the problem persisted,however i found out what the reason was.I was looking at that bit of html in isolation,however i already had an image with the same tag line set up,so when i did the hover over that image appeared,in the location it was previously set up.Thanks for the advice though.

However as always,one solution just seems to lead to another problem,haha,especially with my vague knowledge of web design.Now i find that while one of the hover over thumbnails works perfectly,when i set it up for the other thumbnails nothing happens.

<html>
<head>


<meta http-equiv="Content-Type" content="text/html">
<meta name="Generator" content="Serif WebPlus 7.0">
<title> </title>
<meta name="keywords" content="Dublin, Architects,House's,Extentions, Community Centres">
<meta name="description" content="Dublin Architects .- House's,Extentions, Community Centres">
<style type="text/css">

</style>
</head>
<body bgcolor="#ffffff" link="#ffffff" vlink="#ffffff" text="#000000" topmargin=0 leftmargin=0>
<div style="position:absolute; left:1px; top:1px; width:1259px; height:767px;">
<img src="img45262.jpg" width=1259 height=767 border=0></div>
<div style="position:absolute; left:18px; top:10px; width:1232px; height:67px;">
<img src="img45263.jpg" width=1232 height=67 border=0></div>
<div style="position:absolute; left:18px; top:10px; width:1232px; height:67px;">
<table width=1232px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=Normal-C><br></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:18px; top:671px; width:1232px; height:86px;">
<img src="img45264.jpg" width=1232 height=86 border=0></div>
<div style="position:absolute; left:18px; top:671px; width:1232px; height:86px;">
<table width=1232px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=Normal-C><br></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:375px; top:678px; width:156px; height:53px;">
<table width=156px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=PPStyle0-P>
<span id=PPStyle1-C>27 Adelaide Street<br>Dun Laoghaire<br>Co.Dublin </span><span id=Normal-C><br></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:551px; top:678px; width:114px; height:54px;">
<table width=114px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=PPStyle1-C>Tel :(01) 2803988<br>Fax :(01) 2803995<br>Email :<a href="mailto:info@cga.ie">info@cga.ie</a></span><span id=Normal-C><br></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:539px; top:673px; width:2px; height:60px;">
<img src="img45265.jpg" width=2 height=60 border=0></div>
<div style="position:absolute; left:894px; top:47px; width:46px; height:18px;">
<table width=46px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=PPStyle2-C>Home<br></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:946px; top:47px; width:61px; height:19px;">
<table width=61px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=PPStyle2-C>Projects<br></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:1011px; top:47px; width:62px; height:20px;">
<table width=62px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=PPStyle2-C>Practice<br></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:1075px; top:47px; width:69px; height:19px;">
<table width=69px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=PPStyle2-C>Contacts<br></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:671px; top:673px; width:3px; height:60px;">
<img src="img45266.jpg" width=3 height=60 border=0></div>
<div style="position:absolute; left:379px; top:736px; width:566px; height:28px;">
<table width=566px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=PPStyle3-C>Webdesign by Colin Galavan & Associates • Architects. Updated 22.01.10. </span><span id=Normal-C><br></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:194px; top:30px; width:1px; height:1px;">
<img src="img45267.jpg" width=1 height=1 border=0></div>
<div style="position:absolute; left:27px; top:24px; width:707px; height:43px;">
<table width=707px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=PPStyle4-C>COLIN GALAVAN & ASSOCIATES </span><span id=PPStyle5-C>• ARCHITECTS</span><span id=PPStyle6-C><br></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:894px; top:17px; width:266px; height:27px;">
<table width=266px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=PPStyle7-C>TEL: +353 1 280 3988</span><span id=Normal-C><br></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:680px; top:674px; width:61px; height:54px;">
<img src="img45268.jpg" width=61 height=54 border=0></div>
<div style="position:absolute; left:892px; top:49px; width:45px; height:19px;">
<map name="map45270">
<area shape="poly" coords="0,0 45,0 45,18 0,18" href="index.html">
</map>
<img src="img45269.gif" width=45 height=19 border=0 usemap="#map45270"></div>
<div style="position:absolute; left:945px; top:49px; width:59px; height:17px;">
<map name="map45271">
<area shape="poly" coords="0,0 59,0 59,16 0,16" href="page2.html">
</map>
<img src="img45269.gif" width=59 height=17 border=0 usemap="#map45271"></div>
<div style="position:absolute; left:1010px; top:49px; width:59px; height:17px;">
<map name="map45272">
<area shape="poly" coords="0,0 59,0 59,16 0,16" href="page5.html">
</map>
<img src="img45269.gif" width=59 height=17 border=0 usemap="#map45272"></div>
<div style="position:absolute; left:1076px; top:49px; width:63px; height:16px;">
<map name="map45273">
<area shape="poly" coords="0,0 62,0 62,15 0,15" href="page6.html">
</map>
<img src="img45269.gif" width=63 height=16 border=0 usemap="#map45273"></div>
<div style="position:absolute; left:20px; top:24px; width:673px; height:30px;">
<map name="map45274">
<area shape="poly" coords="0,0 672,0 672,29 0,29" href="page6.html">
</map>
<img src="img45269.gif" width=673 height=30 border=0 usemap="#map45274"></div>
<div style="position:absolute; left:18px; top:587px; width:1231px; height:79px;">
<img src="img45275.jpg" width=1231 height=79 border=0></div>
<div style="position:absolute; left:26px; top:594px; width:89px; height:64px;">
<img src="untitled path_1.jpg" width=89 height=64 border=0></div>
<div style="position:absolute; left:125px; top:594px; width:90px; height:65px;">
<img src="img45276.jpg" width=90 height=65 border=0></div>
<div style="position:absolute; left:225px; top:594px; width:87px; height:65px;">
<img src="img45277.jpg" width=87 height=65 border=0></div>
<div style="position:absolute; left:322px; top:594px; width:86px; height:64px;">
<img src="p1010004.jpg" width=86 height=64 border=0></div>
<div style="position:absolute; left:418px; top:594px; width:49px; height:66px;">
<img src="p1010003.jpg" width=49 height=66 border=0></div>
<div style="position:absolute; left:477px; top:594px; width:48px; height:65px;">
<img src="p1010015.jpg" width=48 height=65 border=0></div>
<div style="position:absolute; left:535px; top:594px; width:87px; height:66px;">
<img src="p1010028.jpg" width=87 height=66 border=0></div>
<div style="position:absolute; left:632px; top:594px; width:48px; height:65px;">
<img src="p1010041.jpg" width=48 height=65 border=0></div>
<div style="position:absolute; left:690px; top:594px; width:87px; height:65px;">
<img src="p1010054.jpg" width=87 height=65 border=0></div>
<div style="position:absolute; left:787px; top:594px; width:49px; height:65px;">
<img src="p 027.jpg" width=49 height=65 border=0></div>
<div style="position:absolute; left:846px; top:594px; width:49px; height:65px;">
<img src="p 020.jpg" width=49 height=65 border=0></div>
<div style="position:absolute; left:905px; top:594px; width:49px; height:65px;">
<img src="p1010039.jpg" width=49 height=65 border=0></div>
<div style="position:absolute; left:964px; top:594px; width:86px; height:65px;">
<img src="p1010048.jpg" width=86 height=65 border=0></div>
<div style="position:absolute; left:1060px; top:594px; width:81px; height:65px;">
<img src="accamera_2.jpg" width=81 height=65 border=0></div>
<div style="position:absolute; left:1151px; top:594px; width:90px; height:64px;">
<img src="untitled path_9.jpg" width=90 height=64 border=0></div>
<div style="position:absolute; left:363px; top:89px; width:504px; height:491px;">
<img src="img45278.jpg" width=504 height=491 border=0></div>
<div style="position:absolute; left:363px; top:89px; width:504px; height:491px;">
<table width=504px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=Normal-C><br></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:18px; top:89px; width:335px; height:491px;">
<img src="img45279.jpg" width=335 height=491 border=0></div>
<div style="position:absolute; left:33px; top:99px; width:320px; height:481px;">
<table width=320px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=PPStyle8-C>Meadowlands Community Facility</span><span id=Normal-C><br><br></span><span id=PPStyle9-C>Enter text here Enter text here Enter text here Enter text here Enter text he Enter text here Enter <br>Enter text here Enter text here Enter text here <br>Enter text here Enter text here Enter text here <br><br><br>Enter text here Enter text here Enter text here <br>Enter text here Enter text here Enter text here <br>Enter text here Enter text here Enter text here <br>Enter text here Enter text here Enter text here <br><br><br>Enter text here Enter text here Enter text here <br>Enter text here Enter text here Enter text here <br>Enter text here Enter text here Enter text here <br>Enter text here Enter text here Enter text here </span><span id=Normal-C><br></span>
</p>
</td></tr>
</table>
<table width=320px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=PPStyle10-P>
<span id=PPStyle11-C><br></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:881px; top:137px; width:173px; height:443px;">
<img src="img45280.jpg" width=173 height=443 border=0></div>
<div style="position:absolute; left:1075px; top:137px; width:173px; height:443px;">
<img src="img45281.jpg" width=173 height=443 border=0></div>
<div style="position:absolute; left:1090px; top:147px; width:158px; height:433px;">
<table width=158px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=PPStyle12-C><a href="page10.html">Community Facilities</a><br><br>Office<br><br>Masterplan</span><span id=Normal-C><br></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:881px; top:86px; width:369px; height:27px;">
<img src="img45282.jpg" width=369 height=27 border=0></div>
<div style="position:absolute; left:881px; top:86px; width:369px; height:27px;">
<table width=369px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=Normal-C><br></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:894px; top:89px; width:72px; height:19px;">
<table width=72px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=PPStyle9-C><a href="page3.html">Residential<br></a></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:1071px; top:89px; width:79px; height:19px;">
<table width=79px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=PPStyle9-C><a href="page8.html">Commercial<br></a></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:1161px; top:89px; width:86px; height:19px;">
<table width=86px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=PPStyle9-C><a href="page9.html">Conservation<br></a></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:981px; top:89px; width:77px; height:19px;">
<table width=77px border=0 cellpadding=0 cellspacing=0>
<tr><td valign=top align=left>
<p id=Normal-P>
<span id=PPStyle9-C><a href="page7.html">Community<br></a></span>
</p>
</td></tr>
</table>
</div>
<div style="position:absolute; left:1050px; top:153px; width:35px; height:10px;">
<map name="map45284">
<area shape="rect" coords="15,11,78,26" href="page10.html">
<area shape="rect" coords="78,11,82,26" href="page10.html">
<area shape="rect" coords="82,11,130,26" href="page10.html">
</map>
<img src="img45283.jpg" width=35 height=10 border=0 usemap="#map45284"></div>
<div style="position:absolute; left:1021px; top:113px; width:141px; height:16px;">
<img src="img45285.jpg" width=141 height=16 border=0></div>
<div style="position:absolute; left:1160px; top:127px; width:4px; height:11px;">
<map name="map45287">
<area shape="rect" coords="15,11,78,26" href="page10.html">
<area shape="rect" coords="78,11,82,26" href="page10.html">
<area shape="rect" coords="82,11,130,26" href="page10.html">
</map>
<img src="img45286.jpg" width=4 height=11 border=0 usemap="#map45287"></div>
<div style="position:absolute; left:892px; top:145px; width:151px; height:179px;">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<title>Image Hover</title>
<script type="text/javascript">
function Show_Image(IDS) {
document.getElementById(IDS).style.display = "block";
}
function Hide_Image(IDS) {
document.getElementById(IDS).style.display = "none";
}
</script>

<!-Link 1-->
</HEAD>
<BODY><a href=" page11.html"
;" onMouseOut="Hide_Image('Img3')"> <small> Meadowlands Community</small><BR><small> Facility, Dun Laoghaire</small></BR> </a>
<span id="Img3" style="display:none">
<div

style="
top: -5;
left: -765;
position: absolute;
z-index: 1;
object.style.visibility="visible""><img src="G:\cga\3.jpg" title="G:\cga\3.jpg" width="590" height="450" hspace="10" vspace="10" align="left" border="0" /></div></span>

</br>

<!-Link 2-->

<a href=" page15.html"
onMouseOut="Hide_Image('Img2')"> <small> Lambs Cross Community </small><BR><small> Facility, Sandyford</small></BR> </a>
<span id="Img2" style=" display:none">
<div
style="
top: -5;
left: -765;
position: absolute;
z-index: 1;
visibility: show;"><img src="g:\cga website\4.jpg"
title="g:\cga website\4.jpg" width="590" height="450" hspace="10" vspace="10" align="left" border="0" /></div></span>

</br>

<!-Link 3-->

<a href=" page15.html"
onMouseOut="Hide_Image('Img4')"> <small> Sallynoggin Community </small><BR><small> Facility, Sallynoggin</small></BR> </a>
<span id="Img4" style=" display:none">
<div
style="
top: -5;
left: -765;
position: absolute;
z-index: 1;
visibility: show;"><img src="G:\CGA Website\5.jpg "title="G:\CGA Website\5.jpg" width="590" height="450" hspace="10" vspace="10" align="left" border="0" /></div></span>

</br>


<a href=" page15.html"
onMouseOut="Hide_Image('Img5')"> <small> </small><BR><small></small></BR> </a>
<span id="Img5" style=" display:none">
<div
style="
top: -58;
left: -532;
position: absolute;
z-index: 1;
visibility: show;"><img src="G:\CGA Website\3.jpg "title="G:\CGA Website\3.jpg" width="490" height="380" hspace="10" vspace="10" align="left" border="0" /></div></span>

</br>



<a href=" page15.html"
onMouseOut="Hide_Image('Img8')"> <small> </small><BR><small></small></BR> </a>
<span id="Img8" style=" display:none">
<div
style="
top: -50;
left: -500;
position: absolute;
z-index: 1;
visibility: show;"><img src="G:\CGA Website\11.jpg "title="G:\CGA Website\11.jpg" width="400" height="300" hspace="10" vspace="10" align="left" border="0" /></div></span>

</BODY>
</HTML>
</div>
<div style="position:absolute; left:123px; top:595px; width:68px; height:52px;">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<title>Image Hover</title>
<script type="text/javascript">
function Show_Image(IDS) {
document.getElementById(IDS).style.display = "block";
}
function Hide_Image(IDS) {
document.getElementById(IDS).style.display = "none";
}
</script>
</HEAD>
<BODY><a href = "1.html"
onMouseOver="Show_Image('Img5');" onMouseOut="Hide_Image('Img5')"> <small>

<table border=0 ="opacity:0.4;filter:alpha(opacity=40)"width=90 height=65>
<tr><td></td></tr>
</table>

<div
id="Img5" style="display ">

</BODY>
</HTML>
</div>
<div style="position:absolute; left:224px; top:594px; width:76px; height:54px;">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<title>Image Hover</title>
<script type="text/javascript">
function Show_Image(IDS) {
document.getElementById(IDS).style.display = "block";
}
function Hide_Image(IDS) {
document.getElementById(IDS).style.display = "none";
}
</script>
</HEAD>
<BODY><a href = "1.html"
onMouseOver="Show_Image('Img8');" onMouseOut="Hide_Image('Img8')"> <small>

<table border=0 ="opacity:0.4;filter:alpha(opacity=40)"width=90 height=65>
<tr><td></td></tr>
</table>

<div
id="Img8" style="display ">

</BODY>
</HTML>
</div>
</body>
</html>

The green shows the hover over which works,and the red is the one where nothing happens.Ive triend many things but no luck so far.Im aware things need to be tidied up,however this is the same for both images/hover overs.My dilemma is that i dont understand why it works for one,while with the exact same html code it wont work for the other.

Thank you

Liam Byrne · 27-01-2010 1:34pm

__plec__ wrote: »

The green shows the hover over which works,and the red is the one where nothing happens.Ive triend many things but no luck so far.Im aware things need to be tidied up,however this is the same for both images/hover overs.My dilemma is that i dont understand why it works for one,while with the exact same html code it wont work for the other.

The HTML is all over the place.

<div
id="Img8" style="display "> 


</BODY>
</HTML>
</div>
</body>
</html>

1) There is nothing IN the div, so the div might display but you won't notice
2) There is no closing </div> before the HTML code hits the </body>
3) There is doubling up of </body></html>
4) The style="display of Img8 doesn't say what display type to use (it needs a colon followed by none/block/inline/whatever)
5) There are opening <small> tags with no closing ones
6) There are spaces after filenames, and the filenames are in different absolute, hard-disk-only locations, e.g. G:\CGA Website\3.jpg and G:\cga\3.jpg

Unless HTML is well-formed without stray or extra tags, then there's no way of understanding what's what, and no guarantee that ANY JavaScript will work, as every browser will make different assumptions.

Actually, is all of the above meant to be a single page ? I hope not!

A basic knowledge of HTML is essential, and at the most basic is the following:

<HTML>
<HEAD>
<TITLE></TITLE>

SCRIPTS AND OTHER CODE GOES HERE - STUFF THAT DOESN'T ACTUALLY APPEAR ON-SCREEN

</HEAD>
<BODY>

ALL ON-SCREEN CONTENT GOES HERE

</BODY>
</HTML>

There should never be more than one of each of the above within a HTML page.

For most container elements, you'll need an opening and closing tag, with the content of that container in between the tags

<DIV id="img8"> CONTENT OF DIV GOES HERE </div>

For individual non-container elements, you'll have just the tag e.g.

<IMG SRC="folder/filename.jpg">

So a div containing an image would be

<DIV id="img8"><IMG SRC="folder/filename.jpg"></div>

And again, there is javascript code within your inline style

object.style.visibility="visible""

Can you post the code for ONE page containing BOTH rollover images ?

__plec__ · 28-01-2010 11:02am

Thanks Liam,

Ive tidied the code up alot,and have it working as i want on both IE and Safari.One small problem with firefox but am going to try and work that out myself,i know i'm close.

Thanks for all the input,really appreciate it

Hover over image - Size, Positioning

Comments