PDA

View Full Version : explanation points on map


Savarona
11-08-2007, 03:29 PM
This code doesn't work in I.E. 6.0 and I.E. 7.0 only in iframe window.
i would like to work it in iframe window but i couldn't do it.
Can you help me? how can i solve this problem?

For opera this code work well.


<style type="text/css">

/* setup the background image of the British Isles */
.uk {
padding:0;
margin:0;
list-style-type:none;
background:#fff url(harita2.jpg);
width:243px;
height:157px;
top:183px;
left:0px;
margin:0px 0px 0px 0px;
position:relative;
}
/* move the text off screen */
.uk li a {
text-indent:-999px;
display:block;
width:10px;
height:10px;
background:#000;
position:absolute;
line-height:8px;
left: 111px;
top: 192px;
background-color: #CC9999;
}
/* make the images and description invisible and an absolute position so that it does not take up any space */
.uk li a em {visibility:hidden; position:absolute;}
/* position the square markers */
.uk li a. {top:288px; left:190px;}
.uk li a.ln {top:280px; left:240px;}
.uk li a.sw {top:105px; left:45px;}
.uk li a.nt {top:135px; left:34px;}
.uk li a.gl {top:190px; left:204px;}
.uk li a.bf {top:110px; left:45px;}
.uk li a.du {top:192px; left:53px;}
/* move the text back into view on hover */
.uk li a:hover {background:#600; text-indent:0; height:1.2em; font-size:1em; color:#fff; line-height:1em; padding:2px 10px; width:90px;}
/* hack for IE5.x */
* html .uk li a:hover {width:110px; height:1.5em; w\idth:90px; he\ight:1.2em;}
/* make the descriptive text visible, give it a size and position */
.uk li a:hover em {visibility:visible; margin-left:5px; background:#fff; border:1px solid #600; width:150px; color:#600; padding:25px;font-style:normal; top:-135px; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; letter-spacing:1px; line-height:1.5em;}
/* hack for IE5.x */
* html .uk li a:hover em {width:200px; w\idth:150px;}
/* give the image a border and margin */
.uk li a:hover em img {border:1px solid #000; display:block; margin-bottom:10px;}
/* style the empty span (I know it's not semantically correct) into an arrow point */
.uk li a:hover em span {display:block; width:0; height:0; overflow:hidden; border:15px solid #fff; border-width:15px 0 15px 15px; border-left-color:#600; position:absolute; left:0; top:128px;}
/* hack for IE5.x */
* html .uk li a:hover em span {width:30px; height:30px; w\idth:0; he\ight:0;}


</style>

<body>
<ul class="uk">
<li><a class="ln" href="#nogo" id='orhit'>London<em><img src="graphics/london.jpg" alt="View of London" title="View of London" />London has the greatest concentration of major attractions in Britain and boasts four World Heritage Sites.<span></span></em></a></li>
<li><a class="bs" href="#nogo">Bristol<em><img src="graphics/bristol.jpg" alt="View of Bristol" title="View of Bristol" />Bristol is an exciting city, overflowing with intriguing, traditional and occasionally off the wall things to do and see.<span></span></em></a></li>
<li><a class="sw" href="#nogo">Swansea<em><img src="graphics/swansea.jpg" alt="View of Swansea" title="View of Swansea" />Swansea, Wales' City by the Sea and birthplace of Dylan Thomas and Catherine Zeta Jones, is a lively and vibrant maritime city and regional shopping centre.<span></span></em></a></li>
<li><a class="nt" href="#nogo">Nottingham<em><img src="graphics/nottingham.jpg" alt="View of Nottingham" title="View of Nottingham" />Some of the most popular places of interest with visitors are Nottingham Castle Museum and Art Gallery, the historic Lace Market area and the Caves.<span></span></em></a></li>
<li><a class="gl" href="#nogo" onmouseover="MM_swapImage('orhit').src="graphics/glasgow.jpg" alt="View of Glasgow" title="View of Glasgow">Glasgow<em>One of Europe's leading cultural capitals, Glasgow has an enviable portfolio of internationally renowned museums and galleries.<span></span></em></a></li>
<li><a class="bf" href="#nogo">Belfast<em><img src="graphics/belfast.jpg" alt="View of Belfast" title="View of Belfast" />The capital of Northern Ireland combines fine Victorian architecture, a fascinating industrial heritage and beautiful scenic surroundings.<span></span></em></a></li>
<li><a class="du" href="#nogo">Dublin<em><img src="graphics/dublin.jpg" alt="View of Dublin" title="View of Dublin" />Dublin has become a fashionable and cosmopolitan destination, yet remains one of Europe's more intimate capital cities.<span></span></em></a></li>
</ul>

Savarona
11-10-2007, 10:16 AM
Domedia please help

This problem also in valid for this css sample:

http://www.cssplay.co.uk/menu/old_master.html
I need your help.
Thanque.

Cary
11-10-2007, 09:51 PM
We can't really help without being able to see a live page. We need to be able to see the pages with the images and see how the main page, the iframe included page, the images folder(s), and style sheet(s) are all located relative to one another. There are too many variables to guess.

You've also included several hacks for IE5.x. Personally, I wouldn't bother, and they may be part of why the page isn't working in IE 6 and 7.

Savarona
11-10-2007, 11:25 PM
Hi Cary.
You are right about too many variables. But i wonder why this code work with opera (iframe or page-html) well. if codes had a problem, then opera wouldn't run it in iframe window too like I.E?

Cary
11-10-2007, 11:35 PM
Well, IE isn't like other browsers and the hacks may be part of the problem.

Savarona
11-10-2007, 11:36 PM
Well, IE isn't like other browsers and the hacks may be part of the problem.


I see. CSS-- >

/* hack for IE5.x */
* html .uk li a:hover em span {width:30px; height:30px; w\idth:0; he\ight:0;}

What this mean?
Someone who write this code doesn't want to work code in I.E.(iframe)

What is the solution then?

Cary
11-10-2007, 11:41 PM
Is your page with the iframe in the same folder/directory as the page being pulled into the iframe? If not, that may be a problem.

Savarona
11-10-2007, 11:44 PM
Is your page with the iframe in the same folder/directory as the page being pulled into the iframe? If not, that may be a problem.

Yes. Main page which calls iframe and other page run in iframe are same directory.

Cary
11-10-2007, 11:46 PM
I see. CSS-- >

/* hack for IE5.x */
* html .uk li a:hover em span {width:30px; height:30px; w\idth:0; he\ight:0;}

What this mean?

This looks like a box-model hack for IE5.x which doesn't calculate dimensions correctly (and neither does IE6 if it's in quirks mode).

IE5.x sees width:30px and height:30px, while other browsers see width:0 and height:0.

Savarona
11-10-2007, 11:50 PM
What can i do solve the problem?

Cary
11-10-2007, 11:57 PM
I still can't tell you what the problem is.

Make sure you're using transitional doctypes and not strict doctypes whenever you create pages with iframes.

Delete all the IE5.x styling hacks, the lines starting with "* html".

If you don't have webspace to use for testing, you can get free hosting at awardspace.com (http://www.awardspace.com/) and other places.

Cary
11-11-2007, 12:03 AM
And also make sure all your html validates. This seems to be something I take for granted, so I forget to remind people to do this. It should really be the first step when you encounter problems with a web page, as you should also be doing it even when you're not encountering problems so as to prevent problems later on.

Savarona
11-11-2007, 12:08 AM
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<STYLE type=text/css>
#imap {
DISPLAY: block;
BACKGROUND: url(harita2.jpg) no-repeat;
MARGIN: 0px 0px 0px 0px;
WIDTH: 242px;
POSITION: relative;
HEIGHT: 314px top:182px; left:11px;
top: 83px;
z-index: 23;
}
#imap A#painting {
DISPLAY: block; BACKGROUND: url(masters/small.jpg) no-repeat 300px 210px; LEFT: 0px; OVERFLOW: hidden; WIDTH: 500px; CURSOR: default; PADDING-TOP: 210px; POSITION: absolute; TOP: 110px; HEIGHT: 0px
}
* HTML #imap A#painting {
HEIGHT: 110}
#imap A#painting:hover {
BACKGROUND-POSITION: 0px 0px; Z-INDEX: 10
}
#imap DD {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
POSITION: absolute;
width: 45px;
}
#imap #man {
Z-INDEX: 20; LEFT: 10px; TOP: 70px
}
#imap #donkey {
Z-INDEX: 20; LEFT: 120px; TOP: 80px
}
#imap #child {
Z-INDEX: 20; LEFT: 49px; TOP: 90px
}
#imap A#link_man {
DISPLAY: block; Z-INDEX: 20; WIDTH: 58px; HEIGHT: 58px; TEXT-DECORATION: none
}
#imap A#link_donkey {
DISPLAY: block; Z-INDEX: 20; WIDTH: 58px; HEIGHT: 68px; TEXT-DECORATION: none
}
#imap A#link_child {
DISPLAY: block; Z-INDEX: 20; WIDTH: 48px; HEIGHT: 88px; TEXT-DECORATION: none;
}
#imap A EM {
DISPLAY: none
}
#imap A SPAN {
DISPLAY: none
}
#imap A:visited SPAN {
DISPLAY: none
}
#imap A#link_man:hover {
BORDER-RIGHT: #fc0 1px solid; BORDER-TOP: #fc0 1px solid; BORDER-LEFT: #fc0 1px solid; BORDER-BOTTOM: #fc0 1px solid
}
#imap A#link_donkey:hover {
BORDER-RIGHT: #fc0 1px solid; BORDER-TOP: #fc0 1px solid; BORDER-LEFT: #fc0 1px solid; BORDER-BOTTOM: #fc0 1px solid
}
#imap A#link_child:hover {
BORDER-RIGHT: #fc0 1px solid; BORDER-TOP: #fc0 1px solid; BORDER-LEFT: #fc0 1px solid; BORDER-BOTTOM: #fc0 1px solid
}
#imap A:hover SPAN {
DISPLAY: block; FONT-SIZE: 0.9em; WIDTH: 330px; COLOR: #000; LINE-HEIGHT: 1.8em; POSITION: absolute; HEIGHT: 270px; TEXT-ALIGN: justify
}
#imap A#link_man:hover SPAN {
LEFT: 310px; TOP: -50px
}
#imap A#link_man:hover EM {
DISPLAY: block; FONT-SIZE: 1px; BACKGROUND: #f00; LEFT: 60px; OVERFLOW: hidden; WIDTH: 250px; POSITION: absolute; TOP: 30px; HEIGHT: 1px
}
#imap A#link_donkey:hover SPAN {
LEFT: 200px; TOP: -80px
}
#imap A#link_donkey:hover EM {
DISPLAY: block; FONT-SIZE: 1px; BACKGROUND: #f00; LEFT: 60px; OVERFLOW: hidden; WIDTH: 140px; POSITION: absolute; TOP: 35px; HEIGHT: 1px
}
#imap A#link_child:hover SPAN {
LEFT: 190px; TOP: -20px
}
#imap A#link_child:hover EM {
DISPLAY: block; FONT-SIZE: 1px; BACKGROUND: #f00; LEFT: 50px; OVERFLOW: hidden; WIDTH: 80px; POSITION: absolute; TOP: 45px; HEIGHT: 1px
}
#imap A:hover SPAN IMG {
BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; FLOAT: left; MARGIN-BOTTOM: 0.5em; BORDER-LEFT: #000 1px solid; MARGIN-RIGHT: 1em; BORDER-BOTTOM: #000 1px solid
}
#imap A SPAN:first-line {
FONT-WEIGHT: bold; FONT-STYLE: italic
}
#info H3 {
FONT-WEIGHT: normal; FONT-SIZE: 1.2em; PADDING-BOTTOM: 5px; MARGIN: 0px 0px 0px 75px; WIDTH: 650px; BORDER-BOTTOM: #aaa 1px solid; FONT-FAMILY: georgia, "times new roman", serif; LETTER-SPACING: 0.1em
}
#info .para {
MARGIN: 0px 0px 0px 75px; WIDTH: 300px
}
</STYLE>

<style>
<!--


#myimage{
filter:light
}

-->
</style>


<style type="text/css">
<!--

<style type="text/css">
<!--
body {
background-image: url(etkison.jpg);
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 0px;
background-color: #000000;
}
#Layer1 {
position:absolute;
visibility:visible;
left:29px;
top:221px;
width:157px;
height:67px;
z-index:1;
}
#Layer2 {
position:absolute;
visibility:visible;
left:271px;
top:279px;
width:202px;
height:211px;
z-index:1;
}
#Layer3 {
position:absolute;
visibility:visible;
left:9px;
top:508px;
width:187px;
height:39px;
z-index:2;
}
.style10 {color: #A67D60}
.style12 {font-size: 19px; color: #A67D60; font-family: "Monotype Corsiva"; }
#Layer4 {
position:absolute;
visibility:visible;
left:14px;
top:441px;
width:24px;
height:24px;
z-index:3;
}
#Layer5 {
position:absolute;
visibility:visible;
left:15px;
top:404px;
width:15px;
height:23px;
z-index:4;
}
.style14 {color: #A67D60; font-size: 18px; }
.style15 {color: #996600}
#myimage {filter:light
}
body {
background-image: url(etkison4.jpg);
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 0px;
background-color: #000000;
}
#Layer6 {
position:absolute;
visibility:visible;
left:268px;
top:188px;
width:134px;
height:187px;
z-index:5;
}
#Layer7 {
position:absolute;
visibility:visible;
left:27px;
top:183px;
width:197px;
height:195px;
z-index:5;
}
#Layer8 {
position:absolute;
visibility:visible;
left:1px;
top:82px;
width:242px;
height:314px;
z-index:5;
}
-->
</style></head>

<body>





<dl id=imap name="imap">
<dt><a
href= name="painting" title="Old Master" id=painting>An Old Master</a><img src="harita2.jpg" width="240" height="324" /> </dt>
<dd id=man><a id=link_man title="Old Man" href="http://www.cssplay.co.uk/menu/old_master.html#nogo"
><em></em><span><img
title="Old Man - close-up" alt="Old Man - close-up"
src="http://www.cssplay.co.uk/menu/masters/man.jpg" />Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Donec nonummy pede vitae lectus. In
sagittis, justo quis auctor adipiscing, massa sapien lacinia ipsum, at
sollicitudin est justo sed orci. Phasellus quam. Duis nec lorem quis erat
feugiat ultricies. Pellentesque quis purus eu massa lobortis pulvinar. Nullam
sed quam vel nisi. Fusce ultricies volutpat sem. Suspendisse ac lorem sit amet
est condimentum scelerisque.</span></a> </dd>
<dd id=donkey><a id=link_donkey title=Donkey
<em></em><span><img
title="The Donkey - close-up" alt="The Donkey - close-up"
src="http://www.cssplay.co.uk/menu/masters/donkey.jpg" />Cras pulvinar nisl a
magna. Vestibulum turpis. Maecenas dignissim, libero id pulvinar luctus, lacus
augue ullamcorper quam, at viverra orci tortor eget velit. Suspendisse
potenti. Duis pharetra, tortor quis consectetuer ornare, odio ipsum tempor
risus, sed convallis velit nunc vel orci. Maecenas facilisis ante ac
urna.</span></a> </dd>
<dd id=child><a id=link_child title="Mother and Child"
><em></em><span><img
title="Mother and Child - close-up" alt="Mother and Child - close-up"
src="http://www.cssplay.co.uk/menu/masters/child.jpg" />Suspendisse vestibulum
convallis sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum pretium tempus pede. Sed placerat imperdiet enim. Donec convallis
dignissim risus. Vivamus molestie sodales quam. Aliquam erat volutpat. Fusce
ultricies volutpat sem. Suspendisse ac lorem sit amet est condimentum
scelerisque.</span></a> </dd>
</dl>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="Layer3"><img src="yazı2.jpg" name="myimage" width="464" height="50" id="myimage" /></div>



<script language="JavaScript1.2">

//Image spotlight effect- By Erik F (die_schlampe@hotmail.com)
//Code enhancements by Dynamicdrive.com
//Visit http://www.dynamicdrive.com for this script

s = 40; // the size of the spotlight
vp = 10; // the visibility percent of the picture
startx = 95; // the top position of your sportlight into the image (on start)
starty = 0; // the left position of your spotlight into the image (on start)


//////////////////////////////////////////////////////////////////
// No need to edit below this line //
//////////////////////////////////////////////////////////////////

var IE = document.all?true:false

function moveL()
{
xv = tempX;
yv = tempY;
myimage.filters.light.MoveLight(1,xv,yv,s,true);
}

if (IE&&myimage.filters)
document.all.myimage.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0


function getMouseXY(e) {
tempX = event.offsetX
tempY = event.offsetY

if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{
moveL();
}

return true
}

var xv = startx;
var yv = starty;
var t= true;
if (IE&&myimage.filters){
myimage.style.cursor="hand";
myimage.filters.light.addAmbient(255,255,255,vp)
myimage.filters.light.addPoint(startx,starty,s,255 ,255,255,255)
}


</script>
<div id="Layer4"><img src="mektup.gif" alt="email" width="24" height="24" /></div>
<div id="Layer5"><img src="tel.gif" alt="telefon" width="15" height="23" /></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

This code aslo wasn't work i.e 5x in frame. And when i was delete href="http://www.cssplay.co.uk/menu/old_master.html#nogo" and others
this css sample was't work html page in addition to iframe.
But for Opera no problem in spite of deleted lines

This page run as iframe in the main page.