CSS Codes
CSS Layouts
Results 1 to 6 of 6

Thread: link to image without new page

  1. 10-06-2006, 10:50 PM #1
    sophie04
    sophie04 is offline New Comer (less than 5 posts)
    Join Date
    Oct 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default link to image without new page

    Hi all..

    I have a problem. I hope you understand what i'm going to try to explain
    *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!
    Last edited by sophie04; 10-14-2006 at 08:07 PM.
    Reply With Quote Reply With Quote
  2. 10-07-2006, 07:40 AM #2
    redice
    redice is offline Junior Coders
    Join Date
    Jul 2005
    Location
    Planet Earth
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

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

    Redice
    Reply With Quote Reply With Quote
  3. 10-07-2006, 09:02 AM #3
    djr33's Avatar
    djr33
    djr33 is offline Global Moderator
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum
    Reply With Quote Reply With Quote
  4. 10-07-2006, 10:31 AM #4
    sophie04
    sophie04 is offline New Comer (less than 5 posts)
    Join Date
    Oct 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by sophie04; 10-07-2006 at 12:56 PM.
    Reply With Quote Reply With Quote
  5. 10-08-2006, 12:00 AM #5
    sophie04
    sophie04 is offline New Comer (less than 5 posts)
    Join Date
    Oct 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Reply With Quote Reply With Quote
  6. 10-08-2006, 01:32 AM #6
    djr33's Avatar
    djr33
    djr33 is offline Global Moderator
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules