modifier_guy
02-22-2004, 08:02 PM
i have buttons on my site and i want ti so when you put the cursor on it it changes to liek black how? do i need to make the same button but with a black background? and then use some code?
Click to See Complete Forum and Search --> : Color rollover with buttons
PeOfEo
02-22-2004, 08:45 PM
Originally posted by modifier_guy
i have buttons on my site and i want ti so when you put the cursor on it it changes to liek black how? do i need to make the same button but with a black background? and then use some code? buttons, as in form buttons, or buttons as in image links.
i have buttons on my site and i want ti so when you put the cursor on it it changes to liek black how? do i need to make the same button but with a black background? and then use some code? buttons, as in form buttons, or buttons as in image links.
modifier_guy
02-22-2004, 09:08 PM
i made images in photoshop then linked them on my site and i want to amke the roll over adiffrent color when the cusor is on them
PeOfEo
02-22-2004, 09:51 PM
<script type="text/javascript" language="JavaScript">
<!--
if (document.images) { // Active Images
img1on = new Image();
img1on.src = "urlon";
img1off = new Image();
img1off.src = "urloff";
img2on = new Image();
img2on.src = "urlon";
img2off = new Image();
img2off.src = "urloff";
}
// Function to show image as mouse moves over the area
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");
}
}
// Function to show image after mouse moves off the area
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");
}
}
// -->
</script>
now the event handler
<a href="" onMouseOver="imgOn('img1')" onMouseOut="imgOn('img1')"><img
id="img1" SRC="urloff" width="119" height="25" ALT=""></a>
<a href onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')"><img
id="img2" SRC="urloff" width="119" height="25" ALT="" border="0"></a>
<!--
if (document.images) { // Active Images
img1on = new Image();
img1on.src = "urlon";
img1off = new Image();
img1off.src = "urloff";
img2on = new Image();
img2on.src = "urlon";
img2off = new Image();
img2off.src = "urloff";
}
// Function to show image as mouse moves over the area
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");
}
}
// Function to show image after mouse moves off the area
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");
}
}
// -->
</script>
now the event handler
<a href="" onMouseOver="imgOn('img1')" onMouseOut="imgOn('img1')"><img
id="img1" SRC="urloff" width="119" height="25" ALT=""></a>
<a href onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')"><img
id="img2" SRC="urloff" width="119" height="25" ALT="" border="0"></a>
modifier_guy
02-22-2004, 10:52 PM
ok so do i need to create another set of the same buttons but diffrent colors?
and were do i add that cade in the Head or body? and
img1on = new Image();
img1on.src = "urlon";
what do i add in the urlon and new image
and were do i add that cade in the Head or body? and
img1on = new Image();
img1on.src = "urlon";
what do i add in the urlon and new image
modifier_guy
02-22-2004, 10:53 PM
ok i am understanding a bit more
Paul Jr
02-22-2004, 11:09 PM
Originally posted by modifier_guy
ok so do i need to create another set of the same buttons but diffrent colors?
Yes. You already have your "normal state" buttons, now you need to create the "hover state" buttons.
Originally posted by modifier_guy
and were do i add that cade in the Head or body?
In the <head> section of your document.
Originally posted by modifier_guy
and
img1on = new Image();
img1on.src = "urlon";
what do i add in the urlon and new image
You need to change "urlon" to the path of your image, and so on and so forth with the rest of 'em.
***EDIT***
I took a look at your page, and I don't mean to be harsh, but you have to stop using an Editor and sit down and properly learn HTML, then XHTML and CSS. You have several <html>, <head>, <title>, and <body> tags, uppercase attributes, not always quoting attribute values, using tables, deprecated tags, mixing CSS with HTML (BORDER=1px). I would suggest deleting everything you have, go to http://www.w3schools.com/ and start reading. Read the tutorials on HTML and Google for tutorials. Try things out, come here when you need help. Once you think you've got a firm grasp on that, move onto XHTML, CSS, using CSS to format your XHTML, rather than the presentational tags you were using in HTML (they teach ya to use presentational tags in HTML at w3schools). And then after you have a good grasp of XHTML and CSS, then sit down and build your site. </rant>
Anyways... sorry about that. :(
ok so do i need to create another set of the same buttons but diffrent colors?
Yes. You already have your "normal state" buttons, now you need to create the "hover state" buttons.
Originally posted by modifier_guy
and were do i add that cade in the Head or body?
In the <head> section of your document.
Originally posted by modifier_guy
and
img1on = new Image();
img1on.src = "urlon";
what do i add in the urlon and new image
You need to change "urlon" to the path of your image, and so on and so forth with the rest of 'em.
***EDIT***
I took a look at your page, and I don't mean to be harsh, but you have to stop using an Editor and sit down and properly learn HTML, then XHTML and CSS. You have several <html>, <head>, <title>, and <body> tags, uppercase attributes, not always quoting attribute values, using tables, deprecated tags, mixing CSS with HTML (BORDER=1px). I would suggest deleting everything you have, go to http://www.w3schools.com/ and start reading. Read the tutorials on HTML and Google for tutorials. Try things out, come here when you need help. Once you think you've got a firm grasp on that, move onto XHTML, CSS, using CSS to format your XHTML, rather than the presentational tags you were using in HTML (they teach ya to use presentational tags in HTML at w3schools). And then after you have a good grasp of XHTML and CSS, then sit down and build your site. </rant>
Anyways... sorry about that. :(
PeOfEo
02-22-2004, 11:37 PM
Originally posted by modifier_guy
<script language="JavaScript">
<!-- hide frome none JavaScript Browsers
Image1=new Image(153,24)
Image1.src="teambutton.gif"
Image2=new Image(153,24)
Image2.src="projectbutton.gif"
Image3=new Image(153,24)
Image3.src="joinbutton.gif"
Image4=new Image(153,24)
Image4.src="tipsbutton.gif"
Image5=new Image(153,24)
Image5.src="linksbutton.gif"
Image6=new Image(153,24)
Image6.src="modnewsbutton.gif"
Image7=new Image(153,24)
Image7.src="onlybutton.gif"
Image8=new Image(153,24)
Image8.src="faqbutton.gif"
// End Hiding -->
</script>
what about this i found it on my friends site but i dont know how to use it Is doing the same thing mine is except his is not going to work as a roll over if it is not doing a before and after image, and he is putting the height and width in.
<script language="JavaScript">
<!-- hide frome none JavaScript Browsers
Image1=new Image(153,24)
Image1.src="teambutton.gif"
Image2=new Image(153,24)
Image2.src="projectbutton.gif"
Image3=new Image(153,24)
Image3.src="joinbutton.gif"
Image4=new Image(153,24)
Image4.src="tipsbutton.gif"
Image5=new Image(153,24)
Image5.src="linksbutton.gif"
Image6=new Image(153,24)
Image6.src="modnewsbutton.gif"
Image7=new Image(153,24)
Image7.src="onlybutton.gif"
Image8=new Image(153,24)
Image8.src="faqbutton.gif"
// End Hiding -->
</script>
what about this i found it on my friends site but i dont know how to use it Is doing the same thing mine is except his is not going to work as a roll over if it is not doing a before and after image, and he is putting the height and width in.
modifier_guy
02-23-2004, 01:26 AM
i did write the code by hand i just wrote it in cute HTML, all cute HTML does is add the HTML body title sets it up then you add from that.
so now i need to make hover buttons and replace the "urlon" with the path of the hover buttons. correct then add all that code in the head of my html document.
<a href="" onMouseOver="imgOn('img1')" onMouseOut="imgOn('img1')"><img
id="img1" SRC="urloff" width="119" height="25" ALT=""></a>
<a href onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')"><img
id="img2" SRC="urloff" width="119" height="25" ALT="" border="0"></a>
were do i add the event handler into the body?
so now i need to make hover buttons and replace the "urlon" with the path of the hover buttons. correct then add all that code in the head of my html document.
<a href="" onMouseOver="imgOn('img1')" onMouseOut="imgOn('img1')"><img
id="img1" SRC="urloff" width="119" height="25" ALT=""></a>
<a href onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')"><img
id="img2" SRC="urloff" width="119" height="25" ALT="" border="0"></a>
were do i add the event handler into the body?
modifier_guy
02-23-2004, 01:27 AM
the www.modfreaks.host.sk site is old i dont use it and i hate it and need to delete it
this is my new one
www.xmodcentral.netfirms.com that modfreaks site is horrible!! i admit my new ones i cleaner code and way better
this is my new one
www.xmodcentral.netfirms.com that modfreaks site is horrible!! i admit my new ones i cleaner code and way better
Paul Jr
02-23-2004, 01:42 AM
Originally posted by modifier_guy
the www.modfreaks.host.sk site is old i dont use it and i hate it and need to delete it
this is my new one
www.xmodcentral.netfirms.com that modfreaks site is horrible!! i admit my new ones i cleaner code and way better
True up, G. Sorry about the rant. :(
the www.modfreaks.host.sk site is old i dont use it and i hate it and need to delete it
this is my new one
www.xmodcentral.netfirms.com that modfreaks site is horrible!! i admit my new ones i cleaner code and way better
True up, G. Sorry about the rant. :(
modifier_guy
02-23-2004, 01:55 AM
o now i need to make hover buttons and replace the "urlon" with the path of the hover buttons. correct then add all that code in the head of my html document.
<a href="" onMouseOver="imgOn('img1')" onMouseOut="imgOn('img1')"><img
id="img1" SRC="urloff" width="119" height="25" ALT=""></a>
<a href onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')"><img
id="img2" SRC="urloff" width="119" height="25" ALT="" border="0"></a>
were do i add the event handler into the body?
thats cool i knew it was horrible! but now back to this ^ ^ ^ ^ ^ ^
<a href="" onMouseOver="imgOn('img1')" onMouseOut="imgOn('img1')"><img
id="img1" SRC="urloff" width="119" height="25" ALT=""></a>
<a href onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')"><img
id="img2" SRC="urloff" width="119" height="25" ALT="" border="0"></a>
were do i add the event handler into the body?
thats cool i knew it was horrible! but now back to this ^ ^ ^ ^ ^ ^
modifier_guy
02-23-2004, 01:58 AM
<script type="text/javascript" language="JavaScript">
<!--
if (document.images) { // Active Images
img1on = new Image();
img1on.src = "home2.jpg";
img1off = new Image();
img1off.src = "pictures2.jpg";
img2on = new Image();
img2on.src = "contact2.jpg ";
img2off = new Image();
img2off.src = "shop2.jpg";
}
// Function to show image as mouse moves over the area
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");
}
}
// Function to show image after mouse moves off the area
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");
}
}
// -->
</script>
img1on = new Image();
img1on.src = "home2.jpg";
what do i add in the Newimage() nothing?
<!--
if (document.images) { // Active Images
img1on = new Image();
img1on.src = "home2.jpg";
img1off = new Image();
img1off.src = "pictures2.jpg";
img2on = new Image();
img2on.src = "contact2.jpg ";
img2off = new Image();
img2off.src = "shop2.jpg";
}
// Function to show image as mouse moves over the area
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");
}
}
// Function to show image after mouse moves off the area
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");
}
}
// -->
</script>
img1on = new Image();
img1on.src = "home2.jpg";
what do i add in the Newimage() nothing?
modifier_guy
02-23-2004, 09:54 AM
so here is were i am now.
i have normal state buttons
i will create hover state button
replace the URLon with the path of the hover buttons
add the code into the <head>
add the event handeler? were? i think when i get this i got it but were does the evnt handerler go, i am guessing in the body? do i need to do anything to the event handelr?
i have normal state buttons
i will create hover state button
replace the URLon with the path of the hover buttons
add the code into the <head>
add the event handeler? were? i think when i get this i got it but were does the evnt handerler go, i am guessing in the body? do i need to do anything to the event handelr?
PeOfEo
02-23-2004, 07:36 PM
Originally posted by modifier_guy
so here is were i am now.
i have normal state buttons
i will create hover state button
replace the URLon with the path of the hover buttons
add the code into the <head>
add the event handeler? were? i think when i get this i got it but were does the evnt handerler go, i am guessing in the body? do i need to do anything to the event handelr? Where ever the darned button goes! The script goes in the head, then the event handler calls it from the body whever the event takes place.
so here is were i am now.
i have normal state buttons
i will create hover state button
replace the URLon with the path of the hover buttons
add the code into the <head>
add the event handeler? were? i think when i get this i got it but were does the evnt handerler go, i am guessing in the body? do i need to do anything to the event handelr? Where ever the darned button goes! The script goes in the head, then the event handler calls it from the body whever the event takes place.
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.