The thing is i'm trying to make a webpage, with a background picture, and transparent boxes where to put the text. The link is here : www.zone.ee/surfon , dont mind that it links forward.
Q1: But i want to put a shoutbox into the box on the left, but when i copy the html code into the editor, the it wont go ON the picture, but anywhere else(above, left of pic, right of pic vms.). So could anyone help me where to put/how to organize the code to set the shoutbox into the box?
Q2: I'd also like the background pic to be non right-clickable, the thing that it just links forward now, is just temporary, the links would go to the other boxes. So how could I/is it good to makeit non right-clickable?

Any help would be appreciated.

Hi twiztid,

If I understand your question right, I think setting the image up as a background image should work. This wont make stop any one from right clicking on it but it will make it react differently than a regular <img>.

This css might be usefull.

body {
 background: #969696 url('originaal.png') no-repeat scroll center middle;
 font: bold 12px Arial, Helvetica, sans-serif; color: #414141; 
 margin: 10px 0 0 10px;
 padding: 15px 10px 10px 5px;
 text-align: left;
}

I hope this helps,

Cheers

Thanks faze, ill try that. But could anyone help me with the shoutbox too? or is it solved by the advice froze gave me?

with the image set to the back ground the shoutbox can be placed using html or preferably css

try using

<div id="shoutbox">
your shout box code
</div>

and then add this to your css file

#shoutbox {
position: relative;
top: ??px;
left: ??px;
float: left;
display: block;
}

As far as right clicks go add the following in to a seperate .js file

var message="";
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if 
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers) 
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")

and then put this in your head tag;

<script type='text/javascript' src="scripts/norightclick.js"></script>

If you have a problem with any of this let me know and I will try to help further.

Cheers,

heh, thx, im really starting to undestand something now
Yea actually there is one thing, i dont quite know/understand what is a .js file, as i kinda started three days ago with this whole thing. I know its an extension, but thats about all

Thanks in advance

Alo

Edit: hmm, do i understand correctly that there has to be a separate file for css codes? in that case im in over my head. I dont know anything about css..maybe you could teach me a bit about this, even for only the background and shoutbox problem :P?
I apologize for being so helpless

Hello,

If you just started three days ago I'd say your off to a great start. A .js file is a javascript file, you can insert java directly in the page but due to the size it is often better to link to a seperate file containing the script.

I normally use windows xp, so I'll explain how you can make a .js file using this os. If yu are using something different let me know and I will try to help out. I know very little about macs so if you are one maybe someone else can explain.

1. Open notepad, word pad and word insert formatting and characters that are not compliant so notepad is preferable

2. Cut the right click script from above and paste it in the notepad.

3. Go to the file menu option in the top left corner and click save as

4. Enter "norightclick.js" Parenthesis and all and hit save.

Thats all there is to it.

You will then need to add following in to the head of your html document for the norightclick.js to apply to your page.

<script type='text/javascript' src="scripts/norightclick.js"></script>

Note the src="scripts/norightclick.js", I put all my scripts in a seperate folder called scripts to keep my root a little less clutered. You can change this to just src="norightclick.js", or src="anythingyouwant/norightclick.js". As far as I know this script works in netscape/mozilla and IE only. I use Opera regularly and it Opera is not effected by it. I dont know of any way to completely protect an image, if someone wants it, they will get it.

CSS can be used in the same way as javascript in as it can be directly on the page, just in a specific tag or linked to from an external document. To create a css page follow the steps I have shown for creating the .js file all though this time end with the .css extension. The link that you will place in the head of your webpage will look something like this;

<link rel="stylesheet" type="text/css" href="style/style.css" title="Default" />

This is an xhtml method, if you are using a html doc type delete the "/" at the end. There is a lot to know about css if you are new to it I highly recommend googleing up some tutorials, you wont be sorry.

No need to apologize for wanting to learn. Believe me the learning end of this will never end.

If you nedd more help let me know.

Cheers,

Hi again,
It feels great when u read something and u notice that you just suddenly understood something that you read :P.
OK, I think i got the javascript files sorted out, but i think that would logically be better too if i put the javascript files and css files to surten directories..because its just more compact . And as I see its also easier to write the css and javascript into seperate files, not directly into the index or whatever page.
Well, I guess then i'll just have to read some html tut's for basics and then go on to css tutorials, but can I ask more basic questions that are directly related to my work from you? Oh one more thing, do you put the css files too into the scripts directory?

P.S. Im using win 2k, but i think the actions you described making the .js file should be the same..?

I usually create a directory called style and thats where I put all the images css and includes that will be a major part of my theme. I also create an "images" directory for page specific images, a scripts directory and an includes directory.

Html is the basics, and a good foundation in it is neccessary but know going in that a lot of what you learn in html can be done more efficently in css.

I'm happy to help with any other questions you have, I'm always looking for a distraction form my work

I think you are right about 2k as well.

Good luck,

Hey guys

First, a quick correction for faze JavaScript is different from Java. Java is a full fledged programming language developed by Sun Microsystems (www.sun.com) and JavaScript is a scripting language developed by Netscape and stolen by Microsoft who named their''s JScript.

But that's not really that important.

I'm with you faze on creating different directories to store my *.css and *.js files. I use textpad (www.textpad.com) to edit my code. It's really easy and you can download colour codings for you .htm and .js and .css files as well as many more (.php, .asp etc... for when you get more advanced)

I would use the css z-index in order to layer the shoutbox. It is just like layers and is pretty easy to use.

twiztid, you've joined a good forum to learn, I have but recently joined, but I've learned alot, happy coding

oh, and www.w3schools.com is the place to learn alot about CSS HTML, XHTML and JavaScript as well as many, many other internet programming related things.

Hi Nate,

I'm downloading textpad, I've been using crimson editor for some time now. It sounds like it's similar to textpad in that it can handle any ext type. It's got color coding as well which has made life alot easier.

Cheers,

Help!
I put the info to the html head tag that u out here, faze, but It doesnt seem to work..i dont know ill post the code here, maybe you could say whats wrong with it?:

<html>
<head>
<title>Surf Saarel :)</title>
</head>
<script type='text/javascript' src="scripts/norightclick.js"></script>
<body bgcolor="#999999">
<bottom bgcolor="#999999"> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<meta name="Generator" content="Corel PHOTO-PAINT 12.0"/>
<a href="gallery.html"><img border="0" width="1001" height="645" src="originaal.png"></a> 
<link rel="stylesheet" type="text/css" href="style/style.css" title="Default">
</body>

</html>

the css is the same then before..but when u put the cursor on the pic it still shows this small box with save, mailing and some other options..anyone?

Hi Twizted,

I'm writing this while on hold for important call at work, so I'll keep this a little short.

The first think that stands out here for me is that the meta, script and link tags need to be between the <head> tags.

<!--doc type??-->
<html>
<head>
<title></title>
<meta>
<link>
<scritp>
</head>
<body>


Content

</body>
</html>


Try it and post if you still have a problem and I'll take a better look at it when I get home tonight.

Cheers,

Hello,

Below is

<!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" xml:lang="en" lang="en">
<head>
<title>Surf Saarel :)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<link rel="stylesheet" type="text/css" href="style/style.css" title="Default"/>
<script type='text/javascript' src="scripts/norightclick.js"></script>
</head>
<body bgcolor="#999999">

<div id="shoutbox">
Shoutbox code stuff
</div>


rest of content here

</body>
</html>

If you have created a directory called style in the root with a .css page named style that has the body information from my first post, you will not need to add the image between the body tags. You will also want to add the shoutbox css I posted earlier to the same file. Make sure you change the ?? for top: & left: to suit your needs.

I've never seen, <meta name="Generator" content="Corel PHOTO-PAINT 12.0"/>, or <bottom bgcolor="#999999"> before. I'm not sure you need them. Although maybe you do, the older I get, the more I relize I dont know.

I noticed you added / before ending your meta tags, this is xhtml and I suggest using this over regular html. The simple tutorial is to remember to add / before > to all tags that do not need to be closed in html like <img or <br>. I apologize for opening up a new can of worms but it's something to keep in mind.

Cheers,

__________________________________________________ ______________________________

NateDogg,

I checked out textpad and it's pretty cool. I'm going to use it for a while to get a better feel but I like it so far. If you have a chance, I'd suggest looking at crimson, the color codes cover a broader code type, and there is a tab menu like firefox for multiple files.

Thanks,

Hey again, more problems..:P
I put the codes u posted here into the css file and the js file, and got the shoutbox finally dispalying on my page..only thing is i needed to keep the
<a href="gallery.html"><img border="0" width="1000" height="645" src="originaal.png"></a>
code because thats the picture :P
but the pic still manages to be a simple pic that doesnt allow anything on it, and its totally clickable..maybe its because it links forward to the gallery?
take a look: www.zone.ee/surfon in i put like 35 and 35 to your ??'s in the css
Any ideas?

Hello,

Did you want the image to be a background or an actual element on the page? If you want it as a background you will not need <img border="0" width="1000" height="645" src="originaal.png">. I noticed you have not linked to the css properly. Did you create a new directory called style? If so double check that the style.css folder is there. If it is make sure it has the css code from above.

Your .css file should look like this so far

body {
 background: #969696 url('originaal.png') no-repeat scroll center middle;
 font: bold 12px Arial, Helvetica, sans-serif; color: #414141; 
 margin: 10px 0 0 10px;
 padding: 15px 10px 10px 5px;
 text-align: left;
}
#shoutbox {
position: relative;
top: ??px;
left: ??px;
float: left;
display: block;
}

With the way the body tag in calls the image here, you should put your originaal image in the style directory.

You don't need <html> or anything else in the css file. Not yet anyway.

See where that gets you, if you need more help with this pm or im me and I will get yu on the right path.

Cheers,