I was wondering

Discuss web site design

Moderators: IRC Operators, Support Team

User avatar
Laura
User
User
Posts: 230
Joined: Sat Sep 08, 2007 11:15 am
Location: in $nick's pants
Contact:

I was wondering

Postby Laura » Sun Jan 27, 2008 10:44 am

How would I go about making something like this ? I have all the images, I just need to learn how to code it, can anyone help?
User avatar
toby
User
User
Posts: 3097
Joined: Fri Jun 30, 2006 12:11 pm

Postby toby » Sun Jan 27, 2008 10:57 am

That's **** coding, use CSS.
ImageImage
ImageImage
Arconiaprime
User
User
Posts: 1458
Joined: Fri May 18, 2007 12:29 am
Contact:

Postby Arconiaprime » Sun Jan 27, 2008 12:12 pm

unless im mistaken

google

A:hover
A:active
A

if theres anymore A CSS commands

toby wrote:That's **** coding, use CSS.

cause its crap java
(Tim) Awong, the helpops are scaring me.
--------------------------------------------------------
SwiftIRC Services Administrator - 2010 - 2012
Owner: intrepid.il.us.SwiftIRC.net
Guus_
User
User
Posts: 466
Joined: Thu Nov 15, 2007 11:47 am
Location: Nijmegen, The Netherlands

Postby Guus_ » Sun Jan 27, 2008 12:19 pm

Arconiaprime wrote:unless im mistaken

google

A:hover
A:active
A

if theres anymore A CSS commands


a {
color: PUT THE COLOR IN HERE;
}

a:hover {
color: PUT THE HOVER COLOR IN HERE;
}

and then for the image it's like

<a href="URL WHERE IT LINKS YOU WHEN CLICKING ON THE IMAGE"><img src="IMAGE.JPG" alt="TITLE" width="WIDTH OF THE PIC IN PIXLES OR %" height="HEIGHT OF THE PIC IN PIXLES OR %" /></a>

As example:

<a href="http://www.swiftirc.net"><img src="http://www.swiftirc.net/forum/templates/DAJ_Glass/images/logo_phpBB.gif" alt="" width="160" height="120" /></a>
Arconiaprime
User
User
Posts: 1458
Joined: Fri May 18, 2007 12:29 am
Contact:

Postby Arconiaprime » Sun Jan 27, 2008 12:35 pm

thought so, I havent done html in a while gonna make a site for phantom so id better get into shape lol
(Tim) Awong, the helpops are scaring me.
--------------------------------------------------------
SwiftIRC Services Administrator - 2010 - 2012
Owner: intrepid.il.us.SwiftIRC.net
User avatar
Remy
User
User
Posts: 582
Joined: Sat Jun 03, 2006 8:50 am

Postby Remy » Sun Jan 27, 2008 9:33 pm

Arconiaprime wrote:
toby wrote:That's **** coding, use CSS.

cause its crap java


JavaScript, not Java.
User avatar
Novalok
User
User
Posts: 653
Joined: Fri Aug 04, 2006 12:40 pm
Location: 127.0.0.1

Postby Novalok » Mon Jan 28, 2008 8:52 am

Is there anyone who can post an example of this code for a working image, so I can understand it?
So just post the full code of one and then it should work.

Thank you in advance...

~ Kiddo
rofl een stoffige pantoffel ®© 2005
User avatar
toby
User
User
Posts: 3097
Joined: Fri Jun 30, 2006 12:11 pm

Postby toby » Mon Jan 28, 2008 9:11 am

ImageImage

ImageImage
User avatar
Novalok
User
User
Posts: 653
Joined: Fri Aug 04, 2006 12:40 pm
Location: 127.0.0.1

Postby Novalok » Mon Jan 28, 2008 10:26 am

Sorry but I got no clue of what they did there... Can someone just post the full code of one of those working pictures? Then I can change things etc to understand and learn it.

~ Kiddo
rofl een stoffige pantoffel ®© 2005
User avatar
xr0x
User
User
Posts: 265
Joined: Tue Sep 18, 2007 8:39 am
Location: Graphics Forum
Contact:

Postby xr0x » Tue Jan 29, 2008 3:34 pm

From the link laura gave..

Code: Select all

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>


This above is the code to make it work.... below is what you edit



<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','THEhoverIMAGE.png',1)"><img src="mainIMAGE.png" name="Image1" width="155" height="71" border="0" id="Image1" /></a>





replace mainIMAGE.png - with the image that will be shown on loading of the page.

replace THEhoverIMAGE.png - with the hover image

I tried... hope it helps..
User avatar
toby
User
User
Posts: 3097
Joined: Fri Jun 30, 2006 12:11 pm

Postby toby » Tue Jan 29, 2008 4:33 pm

xr0x wrote:From the link laura gave..




replace mainIMAGE.png - with the image that will be shown on loading of the page.

replace THEhoverIMAGE.png - with the hover image

I tried... hope it helps..


As I said, crap coding. What I've linked to is better, wider, more compliant.
ImageImage

ImageImage
User avatar
xr0x
User
User
Posts: 265
Joined: Tue Sep 18, 2007 8:39 am
Location: Graphics Forum
Contact:

Postby xr0x » Tue Jan 29, 2008 5:06 pm

toby wrote:
xr0x wrote:From the link laura gave..




replace mainIMAGE.png - with the image that will be shown on loading of the page.

replace THEhoverIMAGE.png - with the hover image

I tried... hope it helps..


As I said, crap coding. What I've linked to is better, wider, more compliant.



"Preloading background images with CSS" thats what you gave them...

I think they just wanted a rollover script... for a navigation they spliced for their site.
Lustre
Suspended
Posts: 351
Joined: Thu Dec 27, 2007 7:27 pm

Postby Lustre » Tue Jan 29, 2008 6:07 pm

xr0x wrote:
toby wrote:
xr0x wrote:From the link laura gave..




replace mainIMAGE.png - with the image that will be shown on loading of the page.

replace THEhoverIMAGE.png - with the hover image

I tried... hope it helps..


As I said, crap coding. What I've linked to is better, wider, more compliant.



"Preloading background images with CSS" thats what you gave them...

I think they just wanted a rollover script... for a navigation they spliced for their site.
User avatar
Laura
User
User
Posts: 230
Joined: Sat Sep 08, 2007 11:15 am
Location: in $nick's pants
Contact:

Postby Laura » Wed Jan 30, 2008 12:19 am

thanks stacy! Im pretty sure I can do it noww. :)! I think I spelled your name right. :o. or maybe its with an e..
ILY STACY OR STACEY :x..
User avatar
Freeman_merc
User
User
Posts: 231
Joined: Sun Oct 28, 2007 4:54 pm
Location: In my bed..

Postby Freeman_merc » Thu Feb 14, 2008 3:33 pm

I do not like to use javascript for image rollovers because it is big. and complicated.

I will place the css code here. For questions PM me on irc or here.



TEXT LINKS:

Code: Select all

<html>
<head>
<title>test</title>
<style type="text/css">
a
{
float:left;
width:5em;
text-decoration:none;
color:black;
background-color:orange;
padding:0.1em 0.5em;
border-right:1px solid white;
}
a:hover,
a:focus {background-color:navy}
</style>
</head>

<body>
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
<a href="#">Link4</a>
</body>
</html>


IMAGE LINK:

Code: Select all

<html>
<head>
<title>test</title>
<style type="text/css">
a
{
padding:0.1em 0.5em;
}
a:link {background: url(image1.png);}
a:hover,
a:focus {background: url(image2.png);}
a:active {background: url(image2.png);}
</style>
</head>

<body>
<a href="#"><img src="place here a image with only text and no background" border="0" /></a>
<a href="#">="#"><img src="place here a image with only text and no background" border="0" /></a>
<a href="#">="#"><img src="place here a image with only text and no background" border="0" /></a>
<a href="#">="#"><img src="place here a image with only text and no background" border="0" /></a>
</body>
</html>
    Image
    Image

Return to “Web design”

Who is online

Users browsing this forum: No registered users and 1 guest