Log in

View Full Version : link to image without new page


sophie04
10-06-2006, 10:50 PM
Hi all..

I have a problem. I hope you understand what i'm going to try to explain :p
*link outdated*
That's my unfinisht portfolio site..
Above the biggest picture from the site are the numbers 1 | 2 | 3.
That have to become links to a new picture in the picture div. So if you click 2 there has to be a second picture from the site. The problem is that i dont wanna make a whole new .html file. Is there a way you can fix this with CSS?
So that if you click 2 there will be a new picture but still in the same .html file.

I'm not very good with CSS so I hope somebody knows :)
Maybe I have to use Javascript..

Thnx in advance!
redice
10-07-2006, 07:40 AM
Hi there Sophie,
Welcome to the lovely world without tables.... CSS ;)
Heres the trick... and hey you dont need to use java at all :P

You may put the following code within your html within the <head> </head>


<style type="text/css">

a, a:visited, a:hover, a:active {
color:#000;
}

#folio {
width:320px;
height:360px;
background:#eee;
border:1px solid #aaa;
margin:0 auto;
}

.images {
padding:0;
margin:320px 0 0 0;
list-style-type:none;
position:relative;
width:320px;
}

.images img {
border:0;
}

.gallery li {
float:left;
}

.images li a, .images li a:images{
font-size:11px;
float:left;
text-decoration:none;
color:#000;
background:#fff;
text-align:center;
width:26px;
height:26px;
line-height:24px;
border:1px solid #444;
margin:2px;
}

.images li a img {
position:absolute;
top:-320px;
left:0;
visibility:hidden;
border:0;
}

.images li a img.landscape {
top:-280px;
}

.images li a img.portrait {
left:40px;
}

.images li a:hover {
background:#ddd;
}

.images li a:active, .images li a:focus {
background:#444;
color:#fff;
}

.images li a:active img, .images li a:focus img {
visibility:visible;
}
</style>

You may customise all the colours, widths etc etc

your HTML would look like this


<div id="folio">
<ul class="images">
<li><a href="#stay">01<img class="landscape" src="image1.jpg" alt="image1" title="image1" /></a></li>
<li><a href="#stay">02<img class="portrait" src="portraitimage1.jpg" alt="portraitimage1" title="portraitimage1" /></a></li>
<li><a href="#stay">03<img class="landscape" src="image2.jpg" alt="image2" title="image2" /></a></li>
<li><a href="#stay">04<img class="portrait" src="portraitimage2.jpg" alt="portraitimage 2" title="portraitimage2" /></a></li>
<li><a href="#stay">05<img class="landscape" src="image3.jpg" alt="image3" title="image3" /></a></li>
<li><a href="#stay">06<img class="portrait" src="portraitimage3.jpg" alt="portraitimage 3" title="portraitimage3" /></a></li>
</ul>
</div> and so on to keep adding more images :D

I use #stay instead of # so that when clicked the page doesnt go right back to the top ;)

Redice
djr33
10-07-2006, 09:02 AM
You might want to look into PHP.
With a function called include() you can include a new page.
Using "get" variables.... like page.php?variable=value, you can set things on the page.
So, you could use the same html (well, php) file, and then have it load different content into the frame.
Additionally, what you have looks very close to something that would work quite well with a database.
PHP would open up a lot of options for you.
However, it is somewhat more advanced than just html (or css and javascript).
So... up to you.
sophie04
10-07-2006, 10:31 AM
I know about PHP, we had it in school but is so hard to learn :P

redice, thnx for the code. I'm going to try it :)

edit: after alot of trying it works now :D
sophie04
10-08-2006, 12:00 AM
Another question do you also have a code like that for text?
Coz the code for the image is bit hard to modify to one for text :)
djr33
10-08-2006, 01:32 AM
Again, php would be the best solution here. I totally agree... it's a lot to learn, but it can really be a huge benefit with lots of options and not rely on javascript/css which are reliant upon the user to be compatible. I'm making a page like this and php is very helpful.
Not that you have to.... just that it would definitely help if you were able to spend the time learning it and that was worth it.

However, there's likely a way to do this, but I'd expect it be more related to javascript than css. Not sure, myself.