|
HTML - Simple Image And Root Directory Question
Wicked simple question:
I have three images located in my "images folder" My Top level looks like this -images- (folder) -party- (folder) index.html In my "party" folder I have a page called "events.html" and I need to know how to call an image in my "events.html" located on the top level folder "image" I know if i move the event.htmls to the top level I could call it by this: <img src="/images/picture1.gif"> However I DONT want to move the events.html, so how do I call the image? O and I am not looking for the answer : put the "http://www.sitename.com/images/" in the image tag ANY HELP THANKS!!!!! Similar TutorialsHi, I'm running a personal server on my PC and have an image gallery script that serves up files outside of the root directory. I am trying to add image tags to folders on my hard drive and it will not display. If I go to the address directly, it shows up fine. Here's what I'm working with: <img src='file:///media/sda3/pic/toronto/beach000.jpg'> shows nothing but going to the address does. Anybody know what to do? I have a little problem with my server, I know it is EASILY solved, but I don't know how. The pages work fine if they are in ROOT, like index.html in ROOT is fine, but when I make a new HTML in a subfolder, ROOT/folder/index.php All the coding messes up and cannot load the files from the root. E.G: My CSS is in my root, cssmovietick.css, this works fine for the php files in the root, but when I go into the sub folder, it cannot find it. Here is the code to find the CSS. Quote: <link href="cssmovietick.css" rel="stylesheet" type="text/css" /> I'm pretty sure you understand For the life of me I cannot keep the tree picture centered under my banner on my guild website. Does anyone know how to "hard lock" the picture to always stay centered as the webpage is sized? Here is the link to the site, go to "Members" and size the page you will see what I mean! http://www.guildvanaheim.com Thank you very much! -Taipans Hello, noob here! I was just wondering how to code a textbox with an image. there'll be an image left aligned, with text to the right of it with an overlay around the whole thing. I know it sounds a little confusing so I made this image to help illustrate what I would like. (Edited with image editing programs, not HTML code that's what I would like!) It'll be something sort of like this: http://www.htmlforums.com/attachment...1&d=1332654184 Hi all, I am trying to get the faveicon on my webpage. I have read some places that IE needs the image to be in the root folder of the web server. Is this true? Has anyone got it to work with the image in a different folder? The reason I ask is because I have some trouble accessing files in the root folder. If it is possible not to use it I would prefer to. Thanks in advance for any help, Jehan Hi all, I have a directory on my website that is password protected... I'd like to set it up so the first page a visitor sees has an option to log in (with username/password form field) or register with a full form to collect their information. Right now all visitors see is an ugly gray box that asks for username and password. How can I do this? All files in the directory (including PDFs etc.) have to stay protected. Thanks! -Lynn Hello All, This being my first actual post, I'd just like to say that after reading some of the threads on here, this looks like a solid forum, unlike so many others containing similar subject matter. Anyway, I have a question for you all, regarding permissions and protection of directories within a site. In this case, my boss and I are trying to create a voice over casting database for our voice over studio in which clients can come to us with a job and we can create a custom page for them with possible casting choices unique to that job. The creating of the custom pages obviously isn't hard, but we running into trouble with being able to link to specific voice over demo MP3s without allowing the user access to our entire database. Ideally, what we'd like to do is keep all of the MP3s in one directory and then link to them on the custom pages without the user then just being able to jump back and access the entire directory. We'd also rather not put each mp3 in it's own folder and password protect that folder because then the clients would have to enter a different password to listen to each VO. Does anyone have an ideas here? We've been told that a custom script would do the trick, be it html or php, but we don't really know where to start. Any help or feedback would be greatly appreciated. Thanks. -Andy Hey guys, I'm pretty new to this whole html/web developing community and I got a few questions. My most important question is: 1. Would it be possible to have a button(like a type=file) that browses directories only, but instead of uploading them, just displaying the path as a text, so when my script picks it up, it just reads the text? EDIT: What I'm talking about is very similar to this thread, but i just want them to upload path so when the script emails the data, its just a link to the path on the local server and my other question is: 2. If a user enters data in a text area, like i am writing in this, when my script picks it up, it does not seem to get the newlines at the end and just displays it all on one line, is there a way i can go about fixing it so that it gets passed(or even converted) to exactly how the user entered it? EDIT: I've tried using wrap="physical" tag but I've been reading and some people say that it doesn't work..any suggestions? Thanks a bunch for your help So in January 2006 I posted a question about "making two buttons in one" 3 years and 5 months later i am happy to announce that I have found a solution. Ok, so no I have not spent the last three years looking, but the need for one came around again yesterday so I revisited the project. All I needed was "simple" image toggle. Image 'A' click it once it changes to image 'B' click it again it changes back to image 'A' All the "image toggle" codes I could find were extremely complex. I thought I had finally found one, it wasn't perfect, but it was the smallest and most basic thing I could find. HTML Code: <html>
<head>
<style type="text/css">
.on {background-image:url(playlist_btn.png); background-repeat:no-repeat;}
.off {background-image:url(playlist_btn_x.png); background-repeat:no-repeat;}
</style>
<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>
</head>
<body>
<div id="onoff" class="playlist_btn"><img src="blank.gif" width="50 height="50" onclick="togglestyle(onoff)"></div>
</body>
</html>
I tested it, it worked, so I considered problem solved. I placed it in my page and nothing. Turns out it wont work with a doc type - so it's useless. Other problems, I'm not big on using "blank gif's" unless I have to, if you want multiple image toggles you need a new JS function for each one, and two lines of css as well. And, though I rarely use image rollovers anymore, it would certainly not be possible in this method. So it was back to the drawing board. Well, I had actually already found the solution a few minuets prior to finding out that the above code is so good. I had coded a button that on rollover shows a tooltip, when you click the button, the text in the tool tip, changes, chick again and it reverts. All done with a simple showHide javascript function, that i am finfing out has many uses. here is the awesome code: Code:
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}
I wont take credit for the showHide code, but I will take credit for the hideShow portion, obviously a monkey could have coded the revers, but iot does make it that much more universal. As the original code was designed to show something that was hidden, add the revers to hide something that is showing and it's perfect. Now I will take a moment to say, though I have yet to find a problem with the code, it seems to work in most browsers, firefox, ie, safari, and validates for WC3 - In sure it has it's flaws. Until now, to show and hide divs I had used the MM_showHideLayers JavaScript function, which by default used the visibility style. It is of course a good script, and has many uses, it's not very big, but it is somewhat complex. The other thing to think about is that invisible objects still take up space. That's what is cool about the display:none: style, is that is not only invisible but it doesn't take up space. So here is how I used the above to JavaScript to make a simple onclick image toggle: HTML Code: <img id="on" src="on.png" width="50" height="50" onClick="javascript:hideShow('on'); javascript:showHide('off')" alt="on">
<img id="off" src="off.png" width="50" height="50" onClick="javascript:hideShow('off'); javascript:showHide('plus')" style="display:none;" alt="off">
Cool huh? Now this example does not have a rollover either, but since it uses to individual images and is not replacing one image wioth another you could easily apply a rollover to both images. But, hold on, look at the above code, isn't that essentially a rollover? Change the first onClick to onMouseOver and the second to onMouseOut and look at that a 'brand new' method for mouseovers. So lets take a look at this for a second, and compare MM_swapImage to this new hideShow method. As far as CSS rollovers I definitely prefer them to the MM_swapImage method, as they use a minimal amount of code. However they actually take a lot of math, construction the buttons is somewhat tedious, because css buttons use 1 image and change it's position, to work well you have to use a "blank.gif" and the the css can really add up if you have a lot of buttons: Also, you can't go directly to a button in the document, you have to fish through the css to make any adjustments. But they are fast, they don't need to be preloaded and... they are pretty cool. But anyway, swapImage and hideShow... The left is the MM_swapImage method. Now when you use the swapImage js you also have to use MM_swapImgRestore, MM_findObj, MM_preloadImages. You don't have to use the preload script but it does make thing work faster... supposedly, but that requires a onload script in the body tag, and if you have a lot of rollovers your body tag can get really long really quick. So what are the advantages, well we know for sure it works, and you only need on image in the document, however actualy having the image you are "swapping" too actually in the document can add functionality. So as you can see, on the right, the showHide method is, in total code, much smaller. True you do need to use two images, so the total code in the body is longer but, it's more than evened out bu the minimal JavaScript, and I think it's worth it. You don't need to use a preloader, you have full control over both images, the up and over state, and unlike the swapImage method, though it's rare you would need to, your up and over images can actually be different sizes, which is kind of cool. So here's the basic code for a rollover: HTML Code: <img id="up" src="up.png" width="50" height="50" onMouseOver="javascript:hideShow('up'); javascript:showHide('over')" alt="up">
<a href="http://google.com"><img id="over" src="over.png" width="50" height="50" onMouseOut="javascript:hideShow('over'); javascript:showHide('up')" style="display:none;" alt="over" border="0"></a>
To add a link the button you just apply it to the "over state" image. And unlike swapImage, though it is overkill, you can also add a "downstate" image quite easily. So, back to the on/off button here is how you would code it using showHide with rollovers. HTML Code: <img id="on" src="on.png" width="50" height="50" onMouseOver="javascript:hideShow('on'); javascript:showHide('onover')" alt="on">
<img id="onover" src="on_over.png" width="50" height="50" onMouseOut="javascript:hideShow('onover'); javascript:showHide('on')" onClick="javascript:hideShow('onover'); javascript:showHide('offover')" style="display:none;" alt="onover">
<img id="off" src="off.png" width="50" height="50" onMouseOver="javascript:hideShow('off'); javascript:showHide('offover')" style="display:none;" alt="off">
<img id="offover" src="off_over.png" width="50" height="50" style="display:none;" onMouseout="javascript:hideShow('offover'); javascript:showHide('off')" onClick="javascript:hideShow('onover'); javascript:showHide('off')"alt="offover">
So here is what is going on: you have the upstate on.png image, when you mouse over it on.png is hidden and on_over.png is displayed. When you click on_over.png it is hidden and off_over.png is display, mouse off it and off.png is displayed. Make scene? Now be aware, when you click, you are also in a scene "mousing off" so some flickering can occur. Firefox handles everything pretty well, IE and Safari not so much. When you click the on_over.png the click tells it to hide on_over.png and show the off_over.png, at the same time the mouseoff tells it to hide on_over.png and show the on.png. So fortunately the toggle with rollovers isn't perfect, but perhaps some more tweaking of the code or maybe, in this case swapImage would work better to do the rollovers... But all in all I'd say its a solid concept. If you feel compiled to do so, reply with any comments, concerns or flaws you see. I feel really dumb asking so elementary a question, but ya' gotta start somewhere. I'm trying to format a blog site for my coworkers. It's been a few years since I have done any web work. Anyway, I wrote up a very simple little HTML doc, but when I open it in my browsers, I just see code. The code is below. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title>BSGoad's Blog</title></head> <h2>Thoughts on the Day</h2> <body> <p align="center">Walking down the street today I met a man selling the <i>Spare Change</i> newspaper. I gave him a couple of bucks for a paper and, unprompted, he proceeded to tell me all that had happened with him in the past week. He had spent some time in New York with an old friend (maybe a relative, I'm not entirely sure), and had just returned to Boston. I was struck the immediacy of his comfort with me. He had nothing to hide. He had nothing of which to be ashamed. He just wanted someone with whom to share, who would listen. <br> Unfortunately, I was on the phone with my mom. I was hardly attentive. Not impolite, just distracted. Later I felt bad. I could have called mom back. I could talk with her anytime. instead I turned my ear back to my phone and bade the man a good day. I was reminded today of the prayer of St. Ignatius in dedication of the day:</p> <blockquote align="center"> Father, I dedicate this new day to you;<br> as I go about my work.<br> I ask you to bless those with whom I come in contact.<br> <p> Lord, I pray for all men and women<br> who work to earn their living;<br> give them satisfaction in what they do.<br> <p> Spirit of God,<br> comfort the unemployed and their families;<br> they are your children and my brothers and sisters.<br> I ask you to help them find work soon.<br> <p> - St. Ignatius Loyola </blockquote> </body> </html> There ya' go. What'm I doing wrong? Brandon simple question! okay hey guys first time post for me as im banging my head against a wall here. I'm not at all good at html but im changing something on my WoW guilds website. now if you visit it you can see the Nav crumb is aligned to the left, i want it to be centered but everything i have tired fails! www.accidentguild.com heres the code im using at the moment, what would i need to make it center? Thanks <tr> <td > <table id="crumb"> <tr> <td id="nav"> <div class="ggcode"><script type="text/javascript" src="http://s.guildomatic.com/22981/host/88/88b299192fa483f4b42058edc1d647ea.js"></script> <script type="text/javascript" src="http://s.guildomatic.com/22981/host/18/1831d0c13f7156a9c39a2f94e27be272.js"></script> <script type="text/javascript" src="http://s.guildomatic.com/22981/host/e6/e60aa8cc24e81fd6f31115aa0dc7ae14.js"></script> <link rel="stylesheet" href="http://s.guildomatic.com/22981/host/48/48d569538603645583d72a456faa23ed.css" type="text/css" media="screen"> <link rel="stylesheet" href="http://s.guildomatic.com/22981/host/ad/adf16ddabb8cdc74eedfbeef8ba76566.css" type="text/css" media="screen"> <div id="menu"> <li><a href="/">home</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/forums">forum</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/members?sort=rank">Roster</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/news">news</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/raid_calendar">calendar</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/dkp">dkp</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/raids">Raids</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/items">items</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/guild_application">Applications</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/http://www.accidentguild.com/page/show/18816">Profiles</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> </div></div> </td> I am trying to get the copyright symbol into my web pages. It works fine in the HTML program but in firefox it becomes a '?' and in ie it becomes a square. The method I tried was using '©'. Can anyone help me out? Hi, I'll go straight to the point. my problem is that I need a text box to have a scroll bar and a fixed size, preferably in a "div" layer. On a more complicated note, I would really like my website not to refresh itself when you click on a menu button. The changing information should be all in the same layer. And, last but not least, and even more complicated, Is there any methods to keep the website updating from being super complicated, as in "I write stuff in any program or text box, and this text goes in that box", Blog or loggin style. Help is greatly appreciated. Thanks. Very simple question here. I'm pretty inexperienced with html, past the basics. I have copied the source code of a webpage into a text file and alltered it. I would like to open the file in Firefox and view this as it would appear as a web page. How would this be done? I have tried opening it as an html file, but the text only appears as the source code. Hi, When writing something on the internet, say a paragraph that has a URL in the middle of the paragraph, can the URL be hidden until someone clicks on it? How does one do that. Simple html, no java please. Thanks. First is i'm new at this, not doing this for fun am a college student studying computer and this is my project (to make a site) i know its bad to rely on someone but I've given up, i tried almost everything the professor thought me. So here's my question I have table of thumbnail images and i want to put a message (using font) on the left side of the thumbnail image table i want it aligned but the message is pushing the table down i want them to be aligned Tried using <left></left> on the message and <right></right> on the thumbnail Here's my page http://img825.imageshack.us/img825/4396/54815352.jpg Here's my code Quote: <center> <font color="EEEEEE" size="6" face="Tempus Sans ITC">Mythological Gods and Goddesses</font> </center> <font> The Olympian gods were the main deities in Ancient Greece. After overthrowing their ancestors, the </br> Titans, the Olympian gods became the rulers of the Cosmos representing the civilization of the </br> world.The Olympian gods were majestically and democratically dwelling on Mount Olympus, the </br> highest mountain in Greece, built by the Cyclops.The leader of the Olympian gods was Zeus.</br></br> <br> </br> All Olympian gods were associated with birth myths but themselves were unaging. They lived inside </br> human-like bodies with an ethereal fluid called ichor running in the veins. They had passions </br> and human weaknesses and were many times at fault, but were then obliged to take </br> the full responsibility of their actions.</font> <table border="1" align="right"> <tr> <td><a href="Zeus.png" target="_blank"><img src="Zeus.png" width="100" height="150" alt="Picture of Zeus King of the Gods, God of the Sky, Lightning and Thunder" align="bottom"/></td> <td><a href="Aphrodite.png" target="_blank"><img src="Aphrodite.png" width="100" height="150" alt="Picture of Aphrodite Goddess of Love and Beauty align="bottom"/></td> <td><a href="Hades.png" target="_blank"><img src="Hades.png" width="100" height="150" alt="Picture of Hades King of the Underworld God of the Dead" align="bottom"/></td> <td><a href="Hephaestus.png" target="_blank"><img src="Hephaestus.png" width="100" height="150" alt="Picture of Hephaestus God of Blacksmiths, Artisans and Volcanoes" align="bottom"/></td> <td><a href="Poseidon.png" target="_blank"><img src="Poseidon.png" width="100" height="150" alt="Picture of Poseidon God of the Sea, Storms and Earthquakes" align="bottom"/></td> </tr> </table> <br> </br> <br> </br> <br> </br> <br> </br> <br> </br> <table border="1" align="right"> <tr> <td><a href="Anubis.png" target="_blank"><img src="Anubis.png" width="100" height="150" alt="Picture of Anubis God of Cemeteries and Embalming " align="bottom"/></td> <td><a href="Osiris.png" target="_blank"><img src="Osiris.png" width="100" height="150" alt="Picture of Osiris God of the Afterlife, the Underworld and the dead." align="bottom"/></td> <td><a href="Isis.png" target="_blank"><img src="Isis.png" width="100" height="150" alt="Picture of Isis Goddess of Motherhood and Fertility" align="bottom"/></td> <td><a href="Ra.png" target="_blank"><img src="Ra.png" width="100" height="150" alt="Picture of Ra God of the Sun" align="bottom"/></td> <td><a href="Hathor.png" target="_blank"><img src="Hathor.png" width="100" height="150" alt="Picture of Hathor Goddess of the Sky, Love and Beauty" align="bottom"/></td> </tr> </table> <br> </br> <br> </br> <br> </br> <br> </br> <br> </br> <table border="1" align="right"> <tr> <td><a href="Thor.png" target="_blank"><img src="Thor.png" width="100" height="150" alt="Picture of Thor God of Thunder" align="bottom"/></td> <td><a href="Odin.png" target="_blank"><img src="Odin.png" width="100" height="150" alt="Picture of Odin God of Batlle, Wisdom and Poetry" align="bottom"/></td> <td><a href="Loki.png" target="_blank"><img src="Loki.png" width="100" height="150" alt="Picture of Loki God of Mischief and Trickery" align="bottom"/></td> <td><a href="Freya.png" target="_blank"><img src="Freya.png" width="100" height="150" alt="Picture of Freya Goddess of Freya Goddess of Love, Beauty, and War" align="bottom"/></td> <td><a href="Skadi.png" target="_blank"><img src="Skadi.png" width="100" height="150" alt="Picture of Skadi Goddess of Hunt and Winter" align="bottom"/></td> </tr> </table> Thanks to the next guy who would help me.. i'll appreciate any help How can I create an HTML file on like a word processor, and then save it as a file and upload it to a hosting site? I have been learning HTML and other web languages for a couple weeks now and one thing is bothering me. I noticed that sometimes when I am reading tutorials and such they put in a /> instead of just a > . So my question is why do I need a / in front of a > sometimes and sometimes I just put a >. I hope my question is clear For a bold font - I switched from <b> to <strong> - is this the correct way? goodness, been a couple months since ive done html, but im back and I got a question... So how do you put text in an image because I have a background color, and I have an image that's a different color, but I want to put text in the image, so how do i do that??? Thx |
|||||||