| Author |
Message |
|
Newbie
Bandwidth Hog
Joined: 23 Jan 2004
Posts: 2247
|
 Posted: 27 Jul 2006 12:05:25 am Post subject: |
|
|
Not exactly.  I know how to do that. What I'm talking about is when you roll your mouse over a link and in the properties you specify the links background to change color. Well only a little background area around the link changes. I want to expand that to make the background color change but in a larger area around the link. |
|
| Back to top |
|
|
Weregoose
Authentic INTJ
Super Elite (Last Title)
Joined: 25 Nov 2004
Posts: 3976
|
| Posted: 27 Jul 2006 12:08:45 am Post subject: |
|
|
I believe that is what [font="courier new;font-size:9pt;line-height:100%;color:darkblue"]padding; does.  |
|
| Back to top |
|
|
Newbie
Bandwidth Hog
Joined: 23 Jan 2004
Posts: 2247
|
| Posted: 27 Jul 2006 12:09:46 am Post subject: |
|
|
Edit: Thanks it worked. :)
Edit: I'm going insane. I want to be able to change images on a page (including the <body> background image) using a link. I know it can be done in javascript. I've serached all over google and all I can find is being able to change an image using the onmouseover function which I don't want to use. I just want the user to be able to click on a link to change images. Does anyone know of a good tutorial for this? Also does anyone know of a good tutorial for javascript besides w3schools? I'm not saying that site is bad, but I've read it before and would like to read up on other peoples tutorials.
Last edited by Guest on 27 Jul 2006 01:47:12 am; edited 1 time in total |
|
| Back to top |
|
|
Weregoose
Authentic INTJ
Super Elite (Last Title)
Joined: 25 Nov 2004
Posts: 3976
|
| Posted: 27 Jul 2006 01:58:59 am Post subject: |
|
|
Scripting is not my forte, but there are surely others here who are more than capable at things like that. So, I'm passing the torch to anyone who is willing and skilled enough to pick up where I would definitely fall into a trench. Good luck, Newbie. 
Last edited by Guest on 27 Jul 2006 02:00:08 am; edited 1 time in total |
|
| Back to top |
|
|
todlangweilig
Advanced Member
Joined: 14 Feb 2006
Posts: 470
|
| Posted: 27 Jul 2006 02:10:31 am Post subject: |
|
|
Perhaps you can adapt this to your needs, scroll down to where the 2 buttons are.
Htmlgoodies.com
I think you could use a function and have your link call that function. The function would change the picture. All you would have to do is how to impliment the function.
EDIT: I think onClick is what you want to use in your <href> tag. Have that call your function.
Last edited by Guest on 27 Jul 2006 02:16:01 am; edited 1 time in total |
|
| Back to top |
|
|
Newbie
Bandwidth Hog
Joined: 23 Jan 2004
Posts: 2247
|
| Posted: 27 Jul 2006 02:23:42 am Post subject: |
|
|
| Thanks. I'll see what I can do. I'll post back when I complete it, or if I need further assistance. |
|
| Back to top |
|
|
alexrudd
pm me if you read this
Bandwidth Hog
Joined: 06 Oct 2004
Posts: 2335
|
| Posted: 27 Jul 2006 09:20:55 am Post subject: |
|
|
todlangweilig wrote: EDIT: I think onClick is what you want to use in your <href> tag. Have that call your function. [post="84840"]<{POST_SNAPBACK}>[/post] I'm fairly sure that will do it for you. I don't remember if you enclose the scripting in single or double quotes, but here's what it might look like. Make sure to include "return false" to prevent the link from opening page.html
<a href="page.html" onClick="doFunction();return false;">
Last edited by Guest on 27 Jul 2006 09:22:22 am; edited 1 time in total |
|
| Back to top |
|
|
Arcane Wizard
`semi-hippie`
Super Elite (Last Title)
Joined: 02 Jun 2003
Posts: 8993
|
| Posted: 27 Jul 2006 10:29:57 am Post subject: |
|
|
//example img
<img id="imgid" src="urltoimage" />
//example link:
<a href="" onClick="return changeimage();">
//example jscript file:
function changeimage() {
image = document.getElementById( "imgid" );
image.src = "newimgurl";
return false;
}
//example body image replacement:
function changebodyimage() {
body = document.body;
body.background = "newimgurl";
return false;
}
together: (changes bolded)
//example link:
<a href="" onClick="return changeimages();">
//example jscript file:
function changeimages() {
changeimage();
changebodyimage)();
return false;
}
idea:
Code:
<a href="" onClick="return changeimages( { { 'body','newbodyimgurl' } , { 'imgid','newimgurl' } } );">
function changeimages( changes ) {
for( i = 0; i < changes.length; i++ ) {
change = changes[i];
object_id = change[0];
newurl = change[1];
if ( object_id == "body" ) {
document.body.background = newurl;
} else {
try {
object = document.getElementByID( object_id );
object.src = newurl;
} catch ( exception ) {
// alert( exception );
}
}
}
return false;
}
Last edited by Guest on 27 Jul 2006 10:41:05 am; edited 1 time in total |
|
| Back to top |
|
|
Newbie
Bandwidth Hog
Joined: 23 Jan 2004
Posts: 2247
|
| Posted: 27 Jul 2006 08:21:17 pm Post subject: |
|
|
| I decided to use external style sheets instead. I linked to one fine and I have it set up fine, but does anyone know how to setup a link so the user can change the stylesheet to which ever one they want? I know firefox can do it but only using the menu they have built in, but I was wondering if anyone knew how to do it from within the webpage. |
|
| Back to top |
|
|
Weregoose
Authentic INTJ
Super Elite (Last Title)
Joined: 25 Nov 2004
Posts: 3976
|
|
| Back to top |
|
|
Newbie
Bandwidth Hog
Joined: 23 Jan 2004
Posts: 2247
|
| Posted: 15 Aug 2006 02:46:28 pm Post subject: |
|
|
I don't know why but the background image in the code below loads about 1/4 of the way on my webpage only when using the localhost. If I don't use the localhost on Apache it loads all the way. Why is this? It doesn't matter whether or not I provide the full path becasue I already did that.
Code:
BODY {
background-image: url('default.jpg');
background-repeat:
no-repeat;
background-attachment: no-repeat; background-attachment: fixed; background-position: center;
margin: 0px;
color: #FFFFFF;
text-align: center;
}
Last edited by Guest on 15 Aug 2006 02:59:52 pm; edited 1 time in total |
|
| Back to top |
|
|
Weregoose
Authentic INTJ
Super Elite (Last Title)
Joined: 25 Nov 2004
Posts: 3976
|
| Posted: 15 Aug 2006 10:26:26 pm Post subject: |
|
|
I would like to see the HTML source—but first, I find this very awkward...
[font="courier new;font-size:9pt;line-height:100%;color:darkblue"]background-attachment: no-repeat;
background-attachment: fixed;
...especially since you have already declared:
[font="courier new;font-size:9pt;line-height:100%;color:darkblue"]background-repeat: no-repeat;
A quick look-up should reveal that [font="courier new;font-size:9pt;line-height:100%;color:darkblue"]background-attachment can't have [font="courier new;font-size:9pt;line-height:100%;color:darkblue"]no-repeat; as an argument!
Next, you should learn to use shorthand in your CSS. Disregarding the faulty line above:
[font="courier new;font-size:9pt;line-height:100%;color:darkblue"]body {
background: white url('default.jpg') no-repeat fixed center center;
color: white;
margin: 0;
text-align: center;
}
Frankly, I doubt that the image fails to download completely. Displaying it is something else, and I'm leaning towards your HTML being the culprit in this case. All in all, it's usually more than helpful to post the all parts that could be involved in diagnosing the problem. Until I can put things in a test environment, I can only make educated guesses.
Last edited by Guest on 17 Aug 2006 08:59:55 pm; edited 1 time in total |
|
| Back to top |
|
|
Newbie
Bandwidth Hog
Joined: 23 Jan 2004
Posts: 2247
|
| Posted: 16 Aug 2006 04:34:19 pm Post subject: |
|
|
I know this code is horrible and I'm embarrased to post it but I have no choice. Alright, this is an external css sheet so all I do is simply call it in the header of the other page.
Also how do I declare the doctype in the external css sheet?
Code:
P {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
font-style: normal;
padding: 3px;
text-indent: 2px;
text-align: left;
color: #FFFFFF;
}
.F1 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
font-style: normal;
width: 750px;
margin: 0 auto;
background-color: #202020;
border: 1px solid #000000;
color: #FFFFFF;
opacity: 80.2;
filter:alpha(opacity: 80.2);
}
.F2 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
font-style: normal;
padding: 3px;
text-indent: 2px;
text-align: left;
background-color: #000000;
color: #FFFFFF;
border-bottom: 4px solid #202020;
}
.F3 {
height: 29px;
text-align: left;
border-top: 4px solid #202020;
background-image: url('topnavdefault.jpg');
color: #000000;
border-bottom: 4px solid #202020;
}
.F4 {
width:314px;
height:1000px;
background-image: url('rightnavdefault.jpg');
float: right;
text-align: left;
color: #FFFFFF;
}
.F5 {
width: 100%;
height: 74px;
background-image: url('homepagelogodefault.jpg');
}
.F6 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
font-style: normal;
margin: 0 auto;
background-color: #202020;
color: #FFFFFF;
text-align: left;
}
#topnavmenu ul{
margin: 0;
padding: 0;
margin-bottom: 0px;
font-family: verdana, arial, helvetica, sans-serif;;
width: 100%;
border: 0px;
background: url('topnavdefault');
float: right;
}
#topnavmenu ul{
width: 99.5%;
}
#topnavmenu ul li{
display: inline;
}
#topnavmenu ul li a{
float: left;
color: black;
padding: 7px 8px;
text-decoration: none;
}
#topnavmenu ul li a:visited{
color: black;
}
#topnavmenu ul li a:hover{
color: white;
background-color: #000000;
}
BODY {
background-image: url('default.jpg');
background-attachment: #000000 no-repeat fixed center;
margin: 0px;
color: #FFFFFF;
text-align: center;
}
Last edited by Guest on 16 Aug 2006 07:32:35 pm; edited 1 time in total |
|
| Back to top |
|
|
Weregoose
Authentic INTJ
Super Elite (Last Title)
Joined: 25 Nov 2004
Posts: 3976
|
| Posted: 16 Aug 2006 11:10:49 pm Post subject: |
|
|
CSS is a unique standard; it doesn't use declarations. Plus, I asked for the HTML source.
Last edited by Guest on 16 Aug 2006 11:11:32 pm; edited 1 time in total |
|
| Back to top |
|
|
Newbie
Bandwidth Hog
Joined: 23 Jan 2004
Posts: 2247
|
| Posted: 17 Aug 2006 06:37:21 pm Post subject: |
|
|
Weregoose wrote: CSS is a unique standard; it doesn't use declarations. Plus, I asked for the HTML source.
[post="86431"]<{POST_SNAPBACK}>[/post]
Yeah, but the css validator from W3C complained that I didn't have a doctype declared for the external css sheet. Anyway here's the html source.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html lang="en">
<head>
<link rel="shortcut icon" href="gaa.ico">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>GAA Clan Home</title>
<link href="default.css" rel="stylesheet" type="text/css" title="style-default">
<link href="usa.css" rel="alternate stylesheet" type="text/css" title="style-usa">
<link href="gla.css" rel="alternate stylesheet" type="text/css" title="style-gla">
<link href="china.css" rel="alternate stylesheet" type="text/css" title="style-china">
<script type="text/javascript">
function setcookie( name, value, expiry, path ) {
if(expiry) {
var now = new Date();
now.setTime( now.getTime() + Math.round(86400000*expiry) );
expiry = now.toGMTString();
}
expiry = expiry ? '; expires=' + expiry : '';
path = path ?'; path=' + path:'';
document.cookie = name + '=' + escape(value) + expiry + path;
}
function getcookie( name ) {
var cookie = document.cookie;
if( cookie.indexOf( name + '=' ) < 0 ) { return null; }
var start = cookie.indexOf( name + '=' ) + name.length + 1;
var finish = cookie.substring( start, cookie.length );
finish = ( finish.indexOf( ';' ) < 0 ) ? cookie.length : start + finish.indexOf( ';' );
return unescape( cookie.substring( start, finish ) );
}
function setsheet( name ) {
var l = document.getElementsByTagName( 'link' ), i, o, t;
for( i=0; (o = l[i]); i++ ) {
if( 'alternate stylesheet'===o.getAttribute( 'rel' ) && ( t = o.getAttribute( 'title' ) ) ) {
o.disabled = true;
o.disabled = ( t !== name );
} } }
function setstyle( list ) {
var name;
if( ( name = list.options[ list.selectedIndex ].value ) ) {
setcookie( 'style', name, 90, '/' );
setsheet( name );
} }
if( ( name = getcookie( 'style' ) ) ) {
setsheet( name );
}
</script>
</head>
<body>
<!--Begin Outer Table-->
<div class="F1">
<div class="F2">
This website is powered by Apache 2.0. To find out more visit [url="http://www.apache.org"]http://www.apache.org[/url].
</div>
<div class="F5">
<!--Put login script here-->
</div>
<!--Begin Top Navigation Bar-->
<div class="F3">
<div id="topnavmenu">
<ul>
<li><a href="gaaclanhome.htm" title="Home">Home</a></li>
<li><a href="" title="Clan Members">Members</a></li>
<li><a href="" title="Forums">Forums</a></li>
<li id="current"><a href="" title="Unit Guide">Unit Guide</a></li>
<li><a href="" title="Uploaded Files">Uploaded Files</a></li>
<li><a href="" title="Schedule">Schedule</a></li>
<li><a href="" title="Media">Media</a></li>
<li><a href="cncgames.htm" title="Browse C&C Games">Browse C&C Games</a></li>
<li><a href="jointheclan.htm" title="Join The Clan">Join The Clan</a></li>
</ul>
</div>
</div>
<!--Begin Right Stats Table-->
<div class="F4">
<br><br>
<u>GAA Clan Statistics Update</u><br><br>
Average:<br>
Overall Played Games:<br>
Overall Wins:<br>
Overall Loses:<br>
Top Player:<br>
Next Offical Clan Game: No Game Scheduled<br><hr>
Don't like the skin of the site. No problem<br>
just change it!<br>
<form action="" style="font:message-box;">
<fieldset><legend>Theme selector</legend>
<label for="styles">Please indicate your preference:</label>
<select id="styles" onchange="setstyle( this ); ">
<option value="" selected="selected" class="sd">Styles</option>
<option value="style-usa">USA</option>
<option value="style-gla">GLA</option>
<option value="style-china">China</option>
<option value="style-default">Default</option>
</select></fieldset>
</form>
</div>
<!--Begin Main Content-->
<img src="topnews.png" alt="Top News Banner">
<p>Last Updated 09 August 06 9:46 pm EST (US)</p><br><br>
<p>Not able to access some parts of the site? Well its because you haven't
logged in. Dont have an account? Submit a form. Just click on "Join The Clan"
link at the top of the page. *Please note not all requests to be a member
are accepted. Also to ensure you are who you say you are we do check records
of the username you submit to us.</p><br>
<p>Not familar with the units yet? Don't worry, just click on the guide link
in the navigation menu at the top and each unit will be explained in detail.</p><br>
<p>No games have been scheduled yet but don't worry we are working hard to create
a schedule and it will be posted upon completion.</p><br>
<p>Is there something about the site that you would like to see change? If so go to the
bottom of this page and click on the "Suggestions" link and fill out the form.</p>
</div>
</body>
</html>
Last edited by Guest on 17 Aug 2006 06:38:00 pm; edited 1 time in total |
|
| Back to top |
|
|
Weregoose
Authentic INTJ
Super Elite (Last Title)
Joined: 25 Nov 2004
Posts: 3976
|
| Posted: 17 Aug 2006 08:44:47 pm Post subject: |
|
|
Newbie wrote: Weregoose wrote: CSS is a unique standard; it doesn't use declarations. Plus, I asked for the HTML source. Yeah, but the css validator from W3C complained that I didn't have a doctype declared for the external css sheet.
W3C CSS Validator Results wrote: To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML.
Okay, I have to interrupt with some more questions.
- What is the name of the background image that doesn't appear to load all the way?
- What stylesheet are you using to access the background image?
- What class/id in the stylesheet is used to call the background image?
- What element in the HTML source is given this class/id?
- Would you be willing to link me to the page presenting this problem?
- May I see it?
I already have most of the answers (everything but 5 and 6, which would be incredibly useful),
but I'm writing this as a guideline for what to provide in the future. Anyway, now you know. ;)
Perhaps it's the abundance of errors in the stylesheet that has something to do with the issue.
If you join #Optimize, I'll help you eliminate them; maybe one in particular:
Code:
background-image: url('default.jpg');
background-attachment: #000000 no-repeat fixed center;
One would think that'd be better as...
Code:
background: black url('default.jpg') no-repeat fixed center center;
...which sounds strangely like something I've said before. :D
Weregoose wrote: Next, you should learn to use shorthand in your CSS. Disregarding the faulty line above:
[font="courier new;font-size:9pt;line-height:100%;color:darkblue"]body {
background: white url('default.jpg') no-repeat fixed center center;
...
Okay, so the only difference was between black and white. :)
–Goose
Last edited by Guest on 17 Aug 2006 08:58:08 pm; edited 1 time in total |
|
| Back to top |
|
|
Newbie
Bandwidth Hog
Joined: 23 Jan 2004
Posts: 2247
|
| Posted: 18 Aug 2006 02:27:18 pm Post subject: |
|
|
| Ok the picture that is not loading all the way is the body background image located in the default.css file which is the css file code that I posted on here. (few posts up) The file name is default.jpg. I'm calling it in the body id tag. I don't have the site up on the internet yet so I can't give you a link to anything. |
|
| Back to top |
|
|
Weregoose
Authentic INTJ
Super Elite (Last Title)
Joined: 25 Nov 2004
Posts: 3976
|
| Posted: 18 Aug 2006 04:34:11 pm Post subject: |
|
|
Newbie wrote: Ok the picture that is not loading all the way is the body background image located in the default.css file which is the css file code that I posted on here. (few posts up) The file name is default.jpg. I'm calling it in the body id tag. Uh, thanks. If you were listening, you'd know that I already had that information.
However, there is contradiction in what you tell me by stating that there is an id tag with the body. First, [font="courier new;font-size:9pt;line-height:100%;color:darkblue"]id's cannot be referred to as "tags". The extra parameters that are strewn about the insides of many elements are called "attributes". Secondly, the body tag in your HTML is defined explicitly with the CSS selector [font="courier new;font-size:9pt;line-height:100%;color:darkblue"]body{}; there is no [font="courier new;font-size:9pt;line-height:100%;color:darkblue"]id affixed therein—not that there is anything to worry about when it's implemented that way, assuming that you want all the pages using this stylesheet to behave in similar fashion. Understand that I am not trying to ridicule you by any means; I'm just trying to familiarize you with the terminology that is inherent with yielding proficiency in web design.
Um, I noticed that you went into #Optimize for about five minutes... I can't tell if it's more shameful that you couldn't have stayed longer, or that I chose not to be on the computer for the entire 20 hours since I posted that link. Well, guess what; I was on shortly after you left. You know, I don't carry out punishment for anyone who happens to be idle in there, so there's certainly no harm in waiting as long as you need to in order to get the help which you request merely by showing up. ;)
Newbie wrote: I don't have the site up on the internet yet so I can't give you a link to anything. That's too bad. Could you provide a screenshot instead?
–Goose
Last edited by Guest on 18 Aug 2006 07:01:55 pm; edited 1 time in total |
|
| Back to top |
|
|
Newbie
Bandwidth Hog
Joined: 23 Jan 2004
Posts: 2247
|
| Posted: 18 Aug 2006 06:49:44 pm Post subject: |
|
|
Weregoose wrote: Um, I noticed that you went into #Optimize for about five minutes... I can't tell if it's more shameful that you couldn't have stayed longer, or that I chose not to be on the computer for the entire 20 hours since I posted that link. Well, guess what; I was on shortly after you left. You know, I don't carry out punishment for anyone who happens to be idle in there, so there's certainly no harm in waiting as long as you need to in order to get the help which you request merely by showing up. ;)
–Goose
[post="86556"]<{POST_SNAPBACK}>[/post]
Yeah, I'm not one of those people who leave their computer on when I'm not at it. When I leave my computer I turn it off. I'll turn on and off my computer several times a day. Also the reason I was only in there for 5 minutes was because I saw you were set to "away" and I had to go pick up a paycheck at work so I left and turned my computer off.
Ill have a screenshot up in about half an hour because Im not on the computer with the localhsot right now, and the image loads all the way off the localhost and not on it. Also I'll be on later tonight if your still up for chatting. :)
Edit: Here is a screenshot.
[attachment=931:attachment]
Last edited by Guest on 18 Aug 2006 07:25:14 pm; edited 1 time in total |
|
| Back to top |
|
|
Rezek
Better Than You
Calc Guru
Joined: 24 Apr 2005
Posts: 1229
|
| Posted: 18 Aug 2006 07:38:28 pm Post subject: |
|
|
Quote: Ill have a screenshot up in about half an hour because Im not on the computer with the localhsot right now, and the image loads all the way off the localhost and not on it.
Well, there you go. It's not a problem with your markup, it's a problem with your Apache configuration. |
|
| Back to top |
|
|
|
General Coding and Design => Calculator Programming
