how do i make a cool clicky thing

#1 Attack_nick

Member

Group: Member
Posts: 34
Joined: 22-September 09

Posted 06 February 2010 - 04:03 AM

-Solved (post #3)

i just remade my server with leopard! but this time i won't do any cool web design crap. its really just a proxy for school. this is the site http://m3rg3.ath.cx

you see that xbox-tan girl? can someone explain to me how i could make it to where if you clicked it, a new picture would replace it? like "xbox girl" *click* "ttgl girl" *click* etc...

#2 c0lin

Bronze Geek

Group: Member
Posts: 280
Joined: 23-December 08
Gender:Male
Location:Edmonton, Canada

Posted 06 February 2010 - 04:49 AM

Like a slideshow?

#3 Attack_nick

Member

Group: Member
Posts: 34
Joined: 22-September 09

Posted 06 February 2010 - 05:16 AM

Exactly. but not all crazy complicated. just click and change.

#4 c0lin

Bronze Geek

Group: Member
Posts: 280
Joined: 23-December 08
Gender:Male
Location:Edmonton, Canada

Posted 06 February 2010 - 08:25 AM

http://c0lin.org/M3RG3.ATH.CX/

Try clicking the tan to see the next tan.

I added the following code to the <head> tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.1.1.js"></script> 
<script type="text/javascript">
		$(document).ready(function() {
		$('#scroll').cycle({
    		fx:      'scrollRight',
    		next:   '#scroll',
    		timeout:  0,
    		easing:  'backinout'
						})
						           });
</script>

The two js scripts loading from the js folder on my site. You can download them from

http://c0lin.org/M3R...ycle.all.min.js

http://c0lin.org/M3R...easing.1.1.1.js

just right-click save as.

and I also added the following <div> tag around your image:

<div id="scroll">
	<img src="pictures/xbox-360-tan.jpg" border="0">
	<img src="pictures/ps3tan.jpg" border="0">
</div>

and of course I added an extra image to show off the effect. You can add as many img tags as you want and it will roll through them.

#5 WizardCM

Tech Rules!

Group: Member
Posts: 1,004
Joined: 21-August 08
Gender:Male
Location:Melbourne, AUS
Interests:Technology, Computers and Windows 7!

Posted 06 February 2010 - 08:52 AM

c0lin, on 06 February 2010 - 08:25 AM, said:

http://c0lin.org/M3RG3.ATH.CX/

Try clicking the tan to see the next tan.

According to those images I still prefer the 360. :lol:

#6 Attack_nick

Member

Group: Member
Posts: 34
Joined: 22-September 09

Posted 06 February 2010 - 03:42 PM

OH MY GOD thanks bro!

EDIT: wait, where do the js files go?

EDIT: never mind i just read the code again lol.

EDIT X3: where can i add <center> tags?

#7 c0lin

Bronze Geek

Group: Member
Posts: 280
Joined: 23-December 08
Gender:Male
Location:Edmonton, Canada

Posted 06 February 2010 - 08:16 PM

Unfortunately <center> doesn't work within the slideshow, although <center> is deprecated and you should be using CSS to center things, but even normal CSS centering doesn't work to center.

I was able to center the xbox tan and zoey by adding padding to the left of the two images. Basically I took the max width (800px) and subtracted the width of the image (447.6px for xboxtan) and divided the result by 2 (176px). I added it inline since it takes less characters to have it inline than creating separate classes for each.

Example: http://c0lin.org/M3RG3.ATH.CX/

Changed code:

	<div id="scroll">	
<img src="http://m3rg3.ath.cx/pictures/eva.jpg"  height="600" width="800" border="0"> 
<img src="http://m3rg3.ath.cx/pictures/silent.png"  height="600" width="800" border="0"> 
<img src="http://m3rg3.ath.cx/pictures/mirrors.jpg"  height="600" width="800" border="0"> 
<img src="http://m3rg3.ath.cx/pictures/xbox-360-tan.jpg"   height="600" width="447.6" border="0" style="padding-left: 176px;" />
<img src="http://m3rg3.ath.cx/pictures/prawn.jpg"  height="600" width="800" border="0"> 
<img src="http://m3rg3.ath.cx/pictures/kagami2.png"  height="600" width="800" border="0"> 
<img src="http://m3rg3.ath.cx/pictures/bam.jpg"  height="600" width="800" border="0"> 
<img src="http://m3rg3.ath.cx/pictures/zoey.jpg"  height="600" width="600" border="0" style="padding-left: 100px;" />
 
</div>

#8 Attack_nick

Member

Group: Member
Posts: 34
Joined: 22-September 09

Posted 06 February 2010 - 08:52 PM

thanks a lot i got it all worked out. take a look at it!

#9 c0lin

Bronze Geek

Group: Member
Posts: 280
Joined: 23-December 08
Gender:Male
Location:Edmonton, Canada

Posted 06 February 2010 - 09:09 PM

You know you've got your doctype set to XHTML but your page doesn't validate to XHTML.

#10 Attack_nick

Member

Group: Member
Posts: 34
Joined: 22-September 09

Posted 06 February 2010 - 09:17 PM

lol whoops.

#11 Attack_nick

Member

Group: Member
Posts: 34
Joined: 22-September 09

Posted 06 February 2010 - 09:30 PM

ine 45, Column 67: required attribute "alt" not specified…es/glider.png" height="40" width="40" border="0"/>✉

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

i don't get this one^

#12 c0lin

Bronze Geek

Group: Member
Posts: 280
Joined: 23-December 08
Gender:Male
Location:Edmonton, Canada

Posted 06 February 2010 - 09:31 PM

I could probably clean up your code for you when I get the chance to do so.

For example your <img> tags actually need to be like <img /> since it doesn't have a closing </img> tag (closing img tags don't exist).

#13 Attack_nick

Member

Group: Member
Posts: 34
Joined: 22-September 09

Posted 06 February 2010 - 09:35 PM

i don't even get what the w3 validator is talking about.

#14 Attack_nick

Member

Group: Member
Posts: 34
Joined: 22-September 09

Posted 06 February 2010 - 09:53 PM

i got it down to 7 errors. all like this.

Line 45, Column 66: required attribute "alt" not specified…res/glider.png" height="40" width="40" border="0"/>✉

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

#15 c0lin

Bronze Geek

Group: Member
Posts: 280
Joined: 23-December 08
Gender:Male
Location:Edmonton, Canada

Posted 06 February 2010 - 09:59 PM

The alt attribute goes inside an img tag. It's the text that shows when an image doesn't load. So like:

<img src="http://m3rg3.ath.cx/pictures/xbox-360-tan.jpg" alt="Xbox 360 Tan" height="600" width="447.6" border="0" style="padding-left: 300px;" />

#16 Attack_nick

Member

Group: Member
Posts: 34
Joined: 22-September 09

Posted 06 February 2010 - 10:01 PM

BAM! WOOOO I PASSED!!!!! BRONZE GEEK YOU ARE DA BOMB

GeekSmack Community: how do i make a cool clicky thing - GeekSmack Community