naviagation, on pictures Options

[bifaerie]

Can anyone tell me how to get my navi on the picture like here?

[xklipse]

They use imagemapping. Photoshop can do that, I'm not sure if other programs does it also.

[Eryi]

TOPIC MOVED: WEB DESIGN

[*Libertie*]

pcoward.com/imagemapper/

This is a fairly good online image mapper, basically all you have to do is click and it does most of the work. The only thing I don't like about it is that it puts all the code in capital letters, which is bad in XHTML. But yeah, try it out. Once you figure out what it does, you can just formulate the code yourself, but sometimes I still choose to use it. :)

[bifaerie]

Here is the script that I have.
The blue part is the image mapping.
Do I have it in the wrong place?
Whenever I try to look at it, the image won't come up.

<!-- begin code provided by createblog.com --><br /><br />[COLOR=blue]<MAP NAME='imgmap'><br /><AREA SHAPE='rect' COORDS='37,382,45,391' HREF='http://www.xanga.com/Private/SubscribeTo.aspx?user=' ALT='Subscribe'><br /><AREA SHAPE='rect' COORDS='50,382,57,390' HREF='http://www.xanga.com/Private/subs.aspx' ALT='Your Subscriptions'><br /></MAP><br /><br /><IMG SRC='SNOWROADWINTERXS4LR.JPG' border=0 width=559 height=400 USEMAP='#imgmap'>[/COLOR]<br /><br /><DIV align="center" valign="middle" style="BORDER-RIGHT: #000000 7px solid; BORDER-TOP: #000000 7px solid; FILTER: alpha(opacity=100); OVERFLOW: visible; BORDER-LEFT: #000000 7px solid; WIDTH: 500px; BORDER-BOTTOM: #000000 7px solid; HEIGHT: auto; BACKGROUND-COLOR:<br />#ffffff"><br /><br /><style type="text/css"><br />body {<br /> background: #778899;<br /> scrollbar-arrow-color: #000000;<br /> scrollbar-track-color: #778899;<br /> scrollbar-shadow-color: #000000;<br /> scrollbar-face-color: #778899;<br /> scrollbar-highlight-color: #000000;<br /> scrollbar-darkshadow-color: #000000;<br /> scrollbar-3dlight-color: #666666; <br /> }<br /><br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops <br />/* width of the comment page I suggest miking it the same width as the blogbody*/<br />{width: 500px;<br />}<br /><br /><br />.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p {<br />/* edits main text */<br /> font:normal 12px Arial;<br /> line-height:13px;<br /> color:#000000;<br /> letter-spacing:0px;<br /> text-align:Center;<br /> }<br /><br />table.footer TD {<br />/* this makes the footer at the bottom centered */<br />/* leave it alone unless you know what to do*/<br /> text-align: center;<br /> }<br /><br />.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer {display: none;}<br /><br /><br />div.blogheader, .caption {<br />/* edits the dates */<br /> font-family:Arial;<br /> text-transform:none;<br /> font-size:16px;<br /> line-height:20px;<br /> font-weight:bold;<br /> color:#000000;<br /> letter-spacing:1px; <br /> background-color: FFFFF;<br /> text-align: center;<br /> width: 500px;<br /> text-decoration: underline;<br /> }<br /><br />a:link, .footernav.link, a.footernav:link, a.footernav:active {<br />/* edits all links */<br /> color:#000000;<br /> text-decoration: none;<br /> font:normal 11px arial;<br /> cursor: crosshair;<br /> }<br /><br />a:visited, a.footernav:visited,  {<br />/* edits the links that the user has visited */<br /> color:#000000; <br /> text-decoration: none;<br /> font:normal 11px arial;<br /> cursor: crosshair;<br /> }<br /><br />a:hover {<br />/* edits when user mouseovers the links */<br /> color:#000000;<br /> font:normal 11px arial;<br /> border-bottom: solid 1px #000000; <br /> border-top: solid 1px #000000;<br /> cursor: crosshair;<br /> }<br /><br />input, select, textarea, .textfield, .button {<br />/* this edits the buttons, dropdowns, etc. */<br /> border: 4px solid #000000;<br /> background-color: #FFFFFF;<br /> letter-spacing:0px;<br /> color: #000000;<br /> }<br /><br />table.left { <br />/* this edits the menu module */<br /> border: 0px solid #c0c0c0;<br /> width:0px;<br />  background-color: #FFFFFF;<br /> }<br /><br />table.blogbody {<br />/* this edits the other the place where the  blog is */<br /> border: 0px solid #8f110f;<br /> background-color: transparent;<br /> width:559px;<br /> }<br /><br />table.left th {<br />/* on your menu module, this edits the title part of it */<br />/* like BLOGRINGS, POSTING CALENDAR, etc */<br /> background-image: url(http://url.com/to/the/site/image.gif);<br /> background-color: #FFFFFF;<br /> font: bold 11px arial;<br /> text-transform: uppercase;<br /> color: #C991AE;<br /> border: none;<br /> }<br />table.left TD {<br />/* on your menu module, this edits the body part of it */<br /> background-image: url(http://url.com/to/the/site/image.gif);<br /> background-color: #FFFFFF;<br /> border: none;<br /> }<br /><br />table.search TD, table.search, table.announcements {<br />/* border of search bar (if you have it) */<br /> background-color: #FFFFFF; <br /> border: 1px solid #c0c0c0;<br /> }<br />table.search TD, table.announcements TH {<br />/* this should be left alone */<br />/* unless you know what to do */<br /> border: 0px solid #c0c0c0;<br /> }<br />table.navigation, table.main, table.footer {<br />/* the width of your blog with modules */<br /> width: 0px;<br /> }<br />hr {<br />/* horizontal divider */<br /> border: 1px solid #000000;<br /> }<br /></style><br /><br /><style><br />body {<br />cursor: crosshair;<br /></style><br /><br /><br />*****************<br /><br /><script><br />// Display Only One Entry<br /><br />if(location.pathname=="/WakeTheWiccan"){<br />var longer = false;<br />var tds = document.getElementsByTagName('td');<br />for(i=0; i<tds.length;i++)<br />{<br />booga = tds[i].innerHTML.indexOf('blogheader');<br />if(booga==11){longer=false;break;}<br />boogie = tds[i].innerHTML.indexOf('javascript');<br />if(boogie == 19){longer=true;break;}<br />}<br />var tables = tds[i].getElementsByTagName('table');<br />var numBreaks = 0;<br />var x = 0;<br />if(longer==true){x=3;}else{x=1}<br />for(j=x; j<tables.length;j++)<br />{<br />numBreaks += tables[j].getElementsByTagName('br').length;<br />tables[j].style.display='none';<br />}<br />var divs = tds[i].getElementsByTagName('div');<br />for(j=2+(2*1)-2; j<divs.length;j++)<br />{<br />divs[j].style.display='none';<br />}<br />var breaks = tds[i].getElementsByTagName('br');<br />for(j=breaks.length-5-numBreaks;j<breaks.length;j++)<br />{<br />breaks[j].style.display='none';<br />}<br />var horizontals = tds[i].getElementsByTagName('hr');<br />var j = horizontals.length-1;<br />horizontals[j].style.display='none';<br />}<br /></script><br /><br /><script language="JavaScript"><br /><br />//Xanga Right Click Logout Script<br />//Copyright Noman Ahmad<br />//http://www.noman.xs3.com/<br />//danger_nomy@msn.com<br />//You Can Use This Script As Long As the Name And The Copyright Protection Stays Intact<br /><!--<br /><br />var message="Sorry, that function is disabled.\nThis Page Copyrighted and\nImages and Text protected!\nALL RIGHTS RESERVED\nYou Are Now Being Logged Out!"; <br /><br />function LogTo (link)<br />  {<br />  var new_url=link;<br />  if (  (new_url != "")  &&  (new_url != null)  )<br />     window.location=new_url;<br />}<br />function click(e) {<br />if (document.all) {<br />if (event.button == 2) {<br />alert(message);<br />LogTo('http://www.xanga.com/logout.aspx')<br />return false;<br />}<br />}<br />if (document.layers) {<br />if (e.which == 3) {<br />alert(message);<br />LogTo('http://www.xanga.com/logout.aspx')<br />return false;<br />}<br />}<br />}<br />if (document.layers) {<br />document.captureEvents(Event.MOUSEDOWN);<br />}<br />document.onmousedown=click;<br /><br />// --><br /></script><br /><br /><br /><script type="text/javascript"><br />//<br />// &copy; EasterEgg, http://www.xanga.com/easteregg<br />//<br />// For use at Xanga only.<br />// <br />// This script replaces any given word or text fragment with <br />// whatever you want: new words and fragments, or even HTML!<br />//<br />// Actually it's pretty simple: add the words or fragments you <br />// wish to replace to the array "oldWords" (each word placed <br />// between double quotation marks, and separated by colons as you <br />// can see below) and add their replacements to the array "newWords", <br />// at the same position as the original words in "oldWords". <br />// The example is pretty self-explaining.<br />//<br />// The script is case sensitive, meaning that if you add "something"<br />// to "oldWords" array it will not recognize "SOMETHING", or "SoMetHInG".<br />//<br />// You can adjust the existing arrays in this code as you see fit, <br />// as long as both arrays keep the same size (same amount of words <br />// in both arrays), otherwise a script error will occur.<br />//<br />// Copy this entire code and paste in the webstats box at your <br />// Look and Feel page. <br />//<br />// You're free to use this script as long as this comment remains intact,<br />// and as long you won't use it to cripple the comments of your visitors;<br />// after all, no one likes his/her words getting twisted...<br />//<br />function replaceWords()<br />{<br />    // ***add the words or fragments you wish to replace below<br />    var oldWords = new Array(<br />        "Subscriptions",<br />        "Publish Comments",<br />        "add eProps",<br />        "eprop",<br />        "eProps",<br />        "add comments",<br />        "comment",<br />        "comments",<br />        "email it",<br />        "view entire profile",<br />        "sign my guestbook",<br />        "My Blogrings",<br />        "Posting Calendar",<br />        "Get Involved!",<br />        "sign out",<br />        "Name:",<br />        "Birthday:",<br />        "Gender:",<br />        "State:",<br />        "Metro:",<br />        "Country:",<br />        "Interests:",<br />        "Expertise:",<br />        "Website",<br />        "Email",<br />        "Member since:",<br />        "Occupation:",<br />        "Subscribe to WakeTheWiccan", <br />        "Get trial subscription");<br /><br />     // *** add the replacing words or fragments below<br />    var newWords = new Array(<br />        "Friends",<br />        "Publish travled paths",<br />        "Add footsteps",<br />        "Footstep",<br />        "Footsteps",<br />        "Add travled paths",<br />        "Travled Path",<br />        "Travled Paths",<br />        "Send Off",<br />        "Profile",<br />        "Keep Dreaming",<br />        "My Groups",<br />        "Calender",<br />        "Participate",<br />        "Say Goodbye",<br />        "I go by",<br />        "I was born on",<br />        "& I love being",<br />        "I live in the state ",<br />        "& the city of",<br />        "from the",<br />        "My favorite things are",<br />        "I &hearts;",<br />        "Site",<br />        "Mail",<br />        "Member since:",<br />        "I am a",<br />        "Be my friend", <br />        "Visit for a while");<br /><br />    allTableData = document.getElementsByTagName('td');<br />    allTableHeaders = document.getElementsByTagName('th');<br />        <br />    var collections = new Array(allTableData,allTableHeaders);<br />    <br />    for (var k = 0; k < collections.length; ++k )<br />    {<br />        for (var i = 0; i < collections[k].length; ++i )<br />        {   <br />            if (collections[k][i].innerHTML.indexOf('TABLE') == -1)<br />            {<br />                for ( var n = 0; n < oldWords.length; ++n )<br />                {<br />                    var indx = collections[k][i].innerHTML.indexOf(oldWords[n]) <br />                    while (indx != -1)<br />                    {   <br />                        var replacement = '';<br />                        indx = collections[k][i].innerHTML.indexOf(oldWords[n]);<br />                        replacement = collections[k][i].innerHTML.replace(oldWords[n], newWords[n]);<br />                        collections[k][i].innerHTML = replacement;<br />                        break;                    <br />                    }<br />                }<br />            }<br />        }<br />    }<br />}<br />replaceWords();<br /></script><br /><br /><br /><script><br />document.title="One kind word can warm three winter months.";<br /></script><br /><br /><style><br />table.footer {display:none;}<br /></style><br /><br /><style type="text/css"><br />/*<br />Did You Know? Remover - xanga.com/add_ons<br />*/<br />Table.Announcements TD {display: none;};<br /></style><br /><br /><script language="javascript"><br /><!--<br />var links = document.getElementsByTagName ('a');<br />for (var l = 0; l < links.length; l++) {<br />str = links[l].innerHTML;<br />//blogring.document.write<br />if (str.match (/\d+:\d+ (am|pm)/i)) links[l]<br />else if (str.match (/eprops/i)) links[l].innerHTML = str.replace (/eprops/i, "Pentacles");<br />else if (str.match (/eprop/i)) links[l].innerHTML = str.replace (/eprop/i, "Pentacles");<br />else if (str.match (/comments/i)) links[l].innerHTML = str.replace (/comments/i, "Witchs");<br />else if (str.match (/comment/i)) links[l].innerHTML = str.replace (/comment/i, "Witchs");<br />else if (str.match (/subscribe!/i)) links[l].innerHTML = str.replace (/subscribe!/i, "Imbrace Me");<br />else if (str.match (/sign out/i)) links[l].innerHTML = str.replace (/sign out/i, "Merry Part");<br />else if (str.match (/Dre_Lynn007/i)) links[l].innerHTML = str.replace (/Dre_Lynn007/i, "Andrea");<br />else if (str.match (/Girl__Loves__Boy/i)) links[l].innerHTML = str.replace (/Girl__Loves__Boy/i, "Nikki");<br />else if (str.match (/xo_iBreakHearts/i)) links[l].innerHTML = str.replace (/xo_iBreakHearts/i, "Kayla");<br />else if (str.match (/lindsay8087/i)) links[l].innerHTML = str.replace (/lindsay8087/i, "Lindsay");<br />else if (str.match (/nainay/i)) links[l].innerHTML = str.replace (/nainay/i, "Raina");<br />else if (str.match (/notreallyinnocent/i)) links[l].innerHTML = str.replace (/notreallyinnocent/i, "Chelsey");<br />else if (str.match (/XsilasX/i)) links[l].innerHTML = str.replace (/XsilasX/i, "Stephan");<br />else if (str.match (/RUFIO_22/i)) links[l].innerHTML = str.replace (/RUFIO_22/i, "Darin");<br />else if (str.match (/horny_gramma/i)) links[l].innerHTML = str.replace (/horny_gramma/i, "Beckie");<br />else if (str.match (/TYarbrough/i)) links[l].innerHTML = str.replace (/TYarbrough/i, "Tim");<br />else if (str.match (/Vampric_Rose/i)) links[l].innerHTML = str.replace (/Vampric_Rose/i, "Becky");<br />else if (str.match (/Warped_Rob/i)) links[l].innerHTML = str.replace (/Warped_Rob/i, "Rob");<br />else if (str.match (/SAMMIElove07/i)) links[l].innerHTML = str.replace (/SAMMIElove07/i, "Sammie");<br />else if (str.match (/sup_brosef/i)) links[l].innerHTML = str.replace (/sup_brosef/i, "Ariel");<br />else if (str.match (/MathewElric/i)) links[l].innerHTML = str.replace (/MathewElric/i, "Mathew");<br />else if (str.match (/roxusan/i)) links[l].innerHTML = str.replace (/roxusan/i, "Roxy");<br />else if (str.match (/InGunsWeTrust/i)) links[l].innerHTML = str.replace (/InGunsWeTrust/i, "Malone");<br />else if (str.match (/whores_icons/i)) links[l].innerHTML = str.replace (/whores_icons/i, "Icons");<br />else if (str.match (/Emergency__Room__Romantic/i)) links[l].innerHTML = str.replace (/Emergency__Room__Romantic/i, "Lauren");<br />}//--><br /></script><br /><br /><script type="text/javascript"><br />function adjustSirListHeight()<br />{<br />    // *** define the height of your SIR-list in the line below <br />    var sirListHeight = '230px';<br />    var allTables = document.getElementsByTagName('tbody');<br />    for (i=4; i < allTables.length; ++i)<br />    {<br />        if ((allTables[i].innerHTML.indexOf('SubscribeTo.aspx') != -1) &&<br />            (allTables[i].innerHTML.toUpperCase().indexOf('<TABLE') == -1))<br />        {<br />            sirlist = allTables[i].lastChild;<br />            temp = sirlist.firstChild.innerHTML;<br />            sirlist.removeChild(sirlist.firstChild);<br />            td = document.createElement('td');<br />            div = document.createElement('div');<br />            div.style.width = '150px';<br />            div.style.height = sirListHeight;<br />            div.style.overflow = 'auto';<br />            div.innerHTML = temp;<br />            td.appendChild(div);<br />            sirlist.appendChild(td);<br />            break;<br />        }<br />    }<br />}<br />if (navigator.userAgent.indexOf('Mac') == -1)<br />    if ((document.URL.indexOf('weblogs') == -1) && <br />        (document.URL.indexOf('guestbook') == -1) &&<br />        (document.URL.indexOf('events') == -1) &&<br />        (document.URL.indexOf('reviews') == -1))<br />        adjustSirListHeight();<br /></script><br /><br /><span style="display: none; font-size: 10px;"><a href="http://www.gottem.net/">Got'em Xanga Logger / Tracker</a></span><br /><script language="javascript"><br />/* Got'em - Blog Logger Tool<br />** http://www.gottem.net<br />** <br />** Track and Log all visitors to your xanga site. For Free!<br />*/<br />var uname = "wakethewiccan";<br /><br />var domain = "http://www.xanga.com/";<br />var pattern_visitor = domain + "private\/home.aspx";<br />var visitor = escape(get_uname(pattern_visitor));<br />var from_url = escape(document['referrer']);<br />var current_url = escape(window.location.href);<br />function get_uname(pattern) {<br /> for (var i=0;i < document.links.length;i++) {<br />  //window.alert(document.links[i].href);<br />  var current_href = document.links[i].href;<br />  if(current_href.search(pattern) != -1) {<br />   var current_link = document.links[i];<br />   if(current_link.innerText) { return current_link.innerText; }<br />   else { return current_link.text; }<br />  } <br /> }<br />}//endfunction<br />function send_data() {<br /> var log_file = "http://68.178.154.207/vlogs/vtrack.php";<br /> var data_pack = new Image();<br /> var info = "?v1=" + uname + "&" + "v2=" + visitor + "&v3=" + from_url + "&v4=" + current_url + "&v5=CST6CDT";<br /> data_pack.src = log_file + info;<br /><br />}<br />send_data();<br /></script><br /><!-- end code provided by createblog.com -->

[freeflow]

Look here:

<IMG SRC='SNOWROADWINTERXS4LR.JPG' border=0 width=559 height=400 USEMAP='#imgmap'>

where it says snowroadwinterxs4lr.jpg you have to upload that img somewhere , example:
http://imageshack.us or http://photobucket.com and then put the url in that spot then it will show.

[steezahh]

do you have front page? pm me if you do.. i can help you out!

[bifaerie]

thanks!

[`so[CONFUSED]*]

is it possible to download front page? my school has it and i learn about it in web design but i want it for home too.

[freeflow]

yea but you have to pay for it . same with dreamweaver. I prefer dreamweaver but yea.
http://www.microsoft.com/office/frontpage/...info/trial.mspx