07-17-2006
|
#1 (permalink)
|
|
Just unleashed!
Join Date: Jul 2005
Location: Inbetween
Posts: 2,402
|
a couple of questions
im a noob as it comes to html, php and xhtml....
but i wanted to build a website, and im building it in notepad 
and i have a couple of questions:
1.i got an image to be exactly "blauw home 10.gif" and i want this images to link to an adress(wich is not yet excisting) ut i want it to link how must i do this?
2.can anybody help me with creating a gallery kind of thing for one of the pages, its an portofolio... 
3.and last but not least, i want to create a textbox in an image(wich positions i know) and this textbox must contain a scrollbar so the text stay in the image....how must i do this
help would really be appriciated.......and i know this is maybe a bit boring for you but you really help me out with it.....
o maybe handy i sliced it up in image ready, and this is it at the moment.....
__________________
Youre all wrong! Martians do exist!
|
|
|
|
07-17-2006
|
#2 (permalink)
|
|
"Enter Random Text Here"
Join Date: Jun 2005
Location: Handsacre, UK
Posts: 37
|
Hi
To add a link to your image you would do this:
Code:
<a href="http://www.biorust.com"><img src="images/blauw-home_12.gif" width="90" height="23" alt="" border="0"></a>
I've added a border="0" to stop the img having a border when its a link. Also you would need to change http://www.biorust.com to the url you want.
The text area could be done like this:
Example can be seen here http://iamsancho.co.uk/test/unleash/blauw-home2.html
Has link on gallery
Code:
<html>
<head>
<style type="text/css">
<!--
.txtbox {
background-image: url(images/blauw-home_24.gif);
background-repeat: no-repeat;
background-position: center;
height: 457px;
width: 230px;
padding: 0px;
margin: 0px;
}
-->
</style>
<title>blauw home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<!-- ImageReady Slices (blauw home.psd) -->
<table id="Table_01" width="501" height="651" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5" rowspan="2">
<img src="images/blauw-home_01.gif" width="230" height="58" alt=""></td>
<td colspan="8">
<img src="images/blauw-home_02.gif" width="270" height="25" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="25" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="3">
<img src="images/blauw-home_03.gif" width="207" height="92" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/blauw-home_04.gif" width="32" height="71" alt=""></td>
<td rowspan="3">
<img src="images/blauw-home_05.gif" width="31" height="92" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="33" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="images/blauw-home_06.gif" width="230" height="59" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="38" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/blauw-home_07.gif" width="32" height="21" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td colspan="13">
<img src="images/blauw-home_08.gif" width="500" height="5" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/blauw-home_09.gif" width="27" height="29" alt=""></td>
<td>
<img src="images/blauw-home_10.gif" width="90" height="23" alt=""></td>
<td rowspan="2">
<img src="images/blauw-home_11.gif" width="19" height="29" alt=""></td>
<td>
<a href="http://www.biorust.com"><img src="images/blauw-home_12.gif" width="90" height="23" alt="" border="0"></a></td>
<td colspan="2" rowspan="2">
<img src="images/blauw-home_13.gif" width="17" height="29" alt=""></td>
<td>
<img src="images/blauw-home_14.gif" width="90" height="23" alt=""></td>
<td rowspan="2">
<img src="images/blauw-home_15.gif" width="20" height="29" alt=""></td>
<td colspan="3">
<img src="images/blauw-home_16.gif" width="90" height="23" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/blauw-home_17.gif" width="57" height="29" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt=""></td>
</tr>
<tr>
<td>
<img src="images/blauw-home_18.gif" width="90" height="6" alt=""></td>
<td>
<img src="images/blauw-home_19.gif" width="90" height="6" alt=""></td>
<td>
<img src="images/blauw-home_20.gif" width="90" height="6" alt=""></td>
<td colspan="3">
<img src="images/blauw-home_21.gif" width="90" height="6" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt=""></td>
</tr>
<tr>
<td colspan="13">
<img src="images/blauw-home_22.gif" width="500" height="21" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/blauw-home_23.gif" width="136" height="165" alt=""></td>
<td colspan="6" rowspan="3">
<textarea wrap="physical" class="txtbox">Text goes here!!! Will automatically add scrollbars.</textarea>
</td>
<td colspan="4">
<img src="images/blauw-home_25.gif" width="134" height="165" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="165" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/blauw-home_26.gif" width="136" height="143" alt=""></td>
<td colspan="4">
<img src="images/blauw-home_27.gif" width="134" height="143" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="143" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/blauw-home_28.gif" width="136" height="170" alt=""></td>
<td colspan="4" rowspan="2">
<img src="images/blauw-home_29.gif" width="134" height="170" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="149" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="images/blauw-home_30.gif" width="230" height="21" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="27" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="90" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="19" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="90" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="90" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="20" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="71" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="26" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="31" height="1" alt=""></td>
<td></td>
</tr>
</center>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
|
|
|
|
|
07-17-2006
|
#3 (permalink)
|
|
Just unleashed!
Join Date: Jul 2005
Location: Inbetween
Posts: 2,402
|
that really helped me, but i still have no idea how it works .sigh.
so i wanted to create a site where you could choose between the colors(orange, blue) and sancho made the blue version work but now the orange version needs to work, and the orange verion is sliced up differently.sigh. so now is my question how must i do this?
o and i wanted to create a roll over effect, what is the command for that??
well if you can help me out with this im thankfull again
i can read a bit of html now but still not enough for making the orange veriosn work(i think this will take much time, but i don't mind)
__________________
Youre all wrong! Martians do exist!
|
|
|
|
|
07-17-2006
|
#4 (permalink)
|
|
"Enter Random Text Here"
Join Date: Jun 2005
Location: Handsacre, UK
Posts: 37
|
The easiest way to do the orange would be to slice the image in the same way as the blue. Then just copy the blue code replacing the images with the orange ones. Will give you a more complete answer to your questions later or tomorrow. Hope this helps
Sancho
|
|
|
|
|
07-17-2006
|
#5 (permalink)
|
|
The Unartistic
Join Date: Jul 2006
Posts: 18
|
well, im not an html guru or anything (although i think my eo page is decent), go to www.w3schools.com, on the left are links to html, xhtml, css, all that great stuff, with example code testing pages too
__________________
Catholicism: S*** happens because you deserve it.
Protestant: Let s*** happen to somebody else.
Judaism: Why does s*** always happen to us?
Buddhism: What is the sound of s*** happening?
|
|
|
|
|
07-17-2006
|
#6 (permalink)
|
|
Just unleashed!
Join Date: Jul 2005
Location: Inbetween
Posts: 2,402
|
true sancho im already working on that, but it will take a looooong wile
and to rau89: thanx, the basics on the site i new already(ive been working with frontpage and changed some things in html after i build the site in frontpage) but those times are over.....but the advanced things are really helpfull!!
yippie the orange version is "working"as the blue ine is
__________________
Youre all wrong! Martians do exist!
Last edited by unleash; 07-17-2006 at 11:05 PM..
|
|
|
|
|
07-18-2006
|
#7 (permalink)
|
|
Just unleashed!
Join Date: Jul 2005
Location: Inbetween
Posts: 2,402
|
but some help on the rollovers is absolutly welcome, and does anybody know an easy way to create somesort of gallery with tumbnails on top and if you roll over those tumbnails you see the complete image below the tumbnails........or is this just inpossible in notepad?
__________________
Youre all wrong! Martians do exist!
|
|
|
|
|
07-18-2006
|
#8 (permalink)
|
|
"Enter Random Text Here"
Join Date: Jun 2005
Location: Handsacre, UK
Posts: 37
|
The rollovers can be done by javascript an example of the code is below i have also added the rollover image to the gallery link on http://iamsancho.co.uk/test/unleash/blauw-home2.html so you can see it working
Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/JavaScript">
<!--
function swapImgRestore() { //v3.0
var i,x,a=document.sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.p) d.p=new Array();
var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}
}
function 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=findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function swapImage() { //v3.0
var i,j=0,x,a=swapImage.arguments; document.sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=findObj(a[i]))!=null){document.sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="preloadImages('/images/rollover.gif')">
<a href="http://www.biorust.com" onmouseout="swapImgRestore()" onmouseover="swapImage('Image1','','images/rollover.gif',1)"><img src="http://forums.biorust.com/images/blauw-home_12.gif" alt="Gallery" name="Image1" width="90" height="23" border="0" id="Image1" /></a>
</body>
</html>
Im not too good with javascript but im sure someone will be able to help you with adapting it for more than one rollover.
Sancho
|
|
|
|
|
07-18-2006
|
#9 (permalink)
|
|
Just unleashed!
Join Date: Jul 2005
Location: Inbetween
Posts: 2,402
|
thanx, how do you mean adept it for more then one rollover?? i changed the numbers and all four of the buttons have a rollover effect now
really thanx you really helped me.....
now i must only complete the final quest: the gallery
__________________
Youre all wrong! Martians do exist!
Last edited by unleash; 07-18-2006 at 12:41 PM..
|
|
|
|
|
07-18-2006
|
#10 (permalink)
|
|
"Enter Random Text Here"
Join Date: Jun 2005
Location: Handsacre, UK
Posts: 37
|
Cool im glad i could help.
|
|
|
|
|
07-18-2006
|
#11 (permalink)
|
|
"Enter Random Text Here"
Join Date: Jun 2005
Location: Handsacre, UK
Posts: 37
|
You could do the gallery like this not sure if its the best way
http://iamsancho.co.uk/test/gallery.html
Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.imghover
{
width:200px;
height:150px;
}
.imghover:hover>img.largepic
{
display: block;
}
.largepic
{
display: none;
}
-->
</style>
</head>
<body>
<div class="imghover">
<img src="JellyfishFractal.jpg" width="200" height="150" />
<img src="JellyfishFractal_1024x768.jpg" width="1024" height="768" class="largepic" />
</div>
</body>
</html>
|
|
|
|
|
07-18-2006
|
#12 (permalink)
|
|
Just unleashed!
Join Date: Jul 2005
Location: Inbetween
Posts: 2,402
|
yes thats exactly what i mean, but i have some new questions(no im not done with you yet )
1.the gallery must like become a vertical textbox with only pictures in it is this possible?
2.where must you type in the font settings for an textbox?
.................more questions to come i think.....................
__________________
Youre all wrong! Martians do exist!
|
|
|
|
|
07-19-2006
|
#13 (permalink)
|
|
"Enter Random Text Here"
Join Date: Jun 2005
Location: Handsacre, UK
Posts: 37
|
Not sure what you mean about the gallery, but the font for the textbox can be set in the css in the first example above
Code:
.txtbox {
background-image: url(images/blauw-home_24.gif);
background-repeat: no-repeat;
background-position: center;
height: 457px;
width: 230px;
padding: 0px;
margin: 0px;
/* Set Font */
font-family:Arial,Helvetica;
}
|
|
|
|
|
07-19-2006
|
#14 (permalink)
|
|
Just unleashed!
Join Date: Jul 2005
Location: Inbetween
Posts: 2,402
|
i mean, you get a vertical "box" with tumbnails in it, yes? when you moveover one of these tumbnails you see the bigger version in a square box below the tumbnails.....
but the vertical box must have ,just like the textbox, a scrollbar so the tumbnails will be inside the box boundarys....
o and the two color thing is working.....Im busy with the hosting problem(i think i will just host it on lycos for free) if that is solved i will put the link somewhere here
__________________
Youre all wrong! Martians do exist!
|
|
|
|
|
07-20-2006
|
#15 (permalink)
|
|
Just unleashed!
Join Date: Jul 2005
Location: Inbetween
Posts: 2,402
|
hmm, i still haven't really found an answer on my gallery.......
maybe i will find an answer in the future,
but there is i think one of the last questions:
i can't really add html tags like:<b></b>or <ul></ul> in the textbox and you can write in the textbox in you browser...(that is not the meaning) can someoen help me out on the textbox( its supposed to be something like a message board(i think you understanded me wrong...))
edit: can anybody tell me how i can tell the system sancho described above(for the gallery) that the large pic should be on a specified location
__________________
Youre all wrong! Martians do exist!
Last edited by unleash; 07-24-2006 at 05:30 PM..
|
|
|
|
| Thread Tools |
|
|
| Display Modes |
 Linear Mode
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
| | | |