homepage Welcome to WebmasterWorld Guest from 54.227.182.191
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
div onclick help?
works on FF but not IE?
realignorent




msg:4176169
 5:36 pm on Jul 25, 2010 (gmt 0)

ok ive been trying to get this code to work forawhile now and have done many searches and foru reading and tried many things to no avail. my div on click commands work on FF but not on IE and its absolutly killing me, I would be willing to make a small donation to someone by helping me to get it to work cause im tired of trying to get this work

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<body background ="http://www.njirishfootball.com/new/nice/bb.png">
</body>


<div onclick="document.location = 'http://www.njirishfootball.com/home/roster' " style="cursor: pointer; width: 95px; height:

40px; position: absolute; top: 57px; left: 397px;"></div>

<div onclick="document.location = 'http://www.njirishfootball.com/home/coachingstaff' " style="cursor: pointer; width: 145px;

height: 40px; position: absolute; top: 57px; left: 498px;"></div>

<div onclick="document.location = 'http://www.njirishfootball.com/home/frontoffice' " style="cursor: pointer; width: 122px;

height: 40px; position: absolute; top: 57px; left: 650px;"></div>

<div onclick="document.location = 'http://www.njirishfootball.com/emeralds' " style="cursor: pointer; width: 172px; height:

40px; position: absolute; top: 57px; left: 779px;"></div>

 

rocknbil




msg:4176181
 5:57 pm on Jul 25, 2010 (gmt 0)

Welcome aboard realignorent, why don't you just use the natural object for this, an anchor, and set it's display to block to emulate the div rather than the other way around? Then your problem goes away, and you don't need to rely on javascript to make it work. You can now apply mouseover effects without JS too. You have the additional advantage of getting it indexed as a link, and the text doesn't need to display - note the negative text-indent. Last, you'll help reduce the heartbreak of div-itis. :-) Give this a try, it's tested code.

I wouldn't use absolute positioning for various reasons, but anyway . . .


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
.some-link {
/*
Assuming the divs that are now anchors
have a background image, apply it here.
Remove this border after testing.
*/
border:1px solid #000;
display: block;
text-indent:-5000px;

height:40px;
position:absolute;
top: 57px;
}
.some-link:hover { background: #fefae0; } /* or image */
#first-link { width:95px;left:397px; }
#second-link { width:145px;left:498px; }
#third-link { width:122px;left:650px; }
#fourth-link { width:172px;left:779px; }
</style>
</head>
<body>
<a class="some-link" id="first-link"
href="http://www.example.com/home/roster">Roster</a>
<a class="some-link" id="second-link"
href="http://www.example.com/home/coachingstaff">Coaching Staff</a>
<a class="some-link" id="third-link"
href="http://www.example.com/home/frontoffice">Front Office</a>
<a class="some-link" id="fourth-link"
href="http://www.example.com/home/emeralds">Emeralds</a>
</body>
</html>


A truly semantic solution would be to put them in a <ul>, because what you have there is a list of links, and you could zero out the margins and either display the li's inline or float them. Then you'd just set the properties above as #list-id a instead.

dreamcatcher




msg:4176490
 9:48 am on Jul 26, 2010 (gmt 0)

If you absolutely must use js, try window.location:

onclick="window.location...

dc

realignorent




msg:4177152
 7:44 am on Jul 27, 2010 (gmt 0)

thank you for your help, actually someone else helped me by telling me to use a image mapping tool and that was the fix to my problem, but thank you for your response's

and im fairly new to html,css,js and other coding so alot of stuff still doesnt make sense to me but thats anyways

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved