Dynamic Image Display - Help please!

Discussion in 'Web Design and Development' started by adom, Sep 20, 2006.

  1. adom macrumors 6502

    Joined:
    May 27, 2006
    Location:
    UK
    #1
    OK, so lets start of by noting that im more design than 'web' design, but I have been trying to learn recently - but this has just got me totally stuck! :D

    Basically, I have a menu bar whereby all the images will have an on/off state, which is to be activated when required.

    For instance, what I want to do is display a particular image when a certain page is loaded; e.g. when the Home Page is loaded, I would like the home2.gif (this is the image's ON state) to be displayed and when it is on any other page than that, the home.gif to be shown (its OFF state).

    NOW...from what little I have picked up in the past few months upon HTML and ASP, you can create definitions within the page.

    E.g:

    <% pagetitle="homepage" %>

    I have used this example in conjunction with the Response.Write() function, in the past to automatically create the title for the page, headings, etc.

    But is there anyway I can use this to help me in my image display needs? Can I write such a code for each image in the nav bar which will ask itself for example:

    If the pre-set 'pagetitle' value= 'homepage', then display home2.gif, else display home.gif ?

    I know I've blubbered on, but Im getting really annoyed with not being about to suss this one out. ANY help would be most appriciated! :D

    Adam
     
  2. adom thread starter macrumors 6502

    Joined:
    May 27, 2006
    Location:
    UK
  3. ValGor macrumors newbie

    Joined:
    Feb 20, 2005
    #3
    if you could like maybe post a picture of what you want to accomplish ?
     
  4. adom thread starter macrumors 6502

    Joined:
    May 27, 2006
    Location:
    UK
    #4
    Sure, yeah sorry. It might help

    [​IMG]

    Basically this is what the nav bar will look like, I just want to code a system wherby each nav image understands wether the 'on' or 'off' image (either name1.gif or name.gif) should be shown, based on the page the user is currently on.

    For instance, in the image shown above, the 'Home' image is currently the home1.gif, which is it's on state. Notice the text is [​IMG] rather than [​IMG] like the others, and the small arrow underneath!

    I just want to automate this, so that when the homepage is loaded the bold image (home1.gif) like in the screenie above appears, and when it is any other page, the home icon is flat and not bold (home.gif) - like the others shown in the navigation example above.
     
  5. riche macrumors newbie

    Joined:
    Nov 9, 2005
    Location:
    South Wales
    #5
    I think I know what you mean. I've done this in the past using SSI:

    <!--#if expr="\"$DOCUMENT_URI\" = \"/index.shtml\"" -->
    <li id="current"><a href="/index.shtml">Home Page </a></li>
    <!--#else -->
    <li><a href="/index.shtml">Home Page </a></li>
    <!--#endif -->

    Does this make sense?
     
  6. Thom_Edwards macrumors regular

    Joined:
    Apr 11, 2003
    #6
    i think you answered your own question!

    Code:
    <%
    if(pagetitle == 'homepage'){
    imagename = 'home2.gif'
    }else
    {
    imagename = 'home.gif'
    }
    %>
    
    <img src="<%= imagename %>">
    
    this is pseudocode, so take it on principle and not syntax.
     
  7. adom thread starter macrumors 6502

    Joined:
    May 27, 2006
    Location:
    UK
    #7
    No. Im soo sorry. Im just a learner really, trying to plod along through too much imagination and not enough coding knowledge.

    Yeah, Thom I know what I want, its just that I have no idea how to create the code for it. What you have given makes sense, but are you saying that is not how it should be structured and written?

    My coding is at a very low level. Maybe im trying to do something over my head.
     
  8. Thom_Edwards macrumors regular

    Joined:
    Apr 11, 2003
    #8
    well, that's the code structure exactly. (that is pretty much what pseudocode is; the structure without any syntax-strictness). i'm not sure which language you are using for your asp pages, so i couldn't give exact code. what i wrote is probably really closer to c# and php, to be honest! if you're doing basic stuff, (i can't believe i'm about to say this) stick with visual basic. it is pretty easy to do basic stuff and the syntax is pretty tame. you will definitely want to do a little searching, though, and find out how to write the basics of the language.

    the <%= in my example is the same as <% Response.write(), so that might help a little bit. also, my if/then statement structure is a bit different from visual basic. i think vb uses something more like (i haven't used vb in a long time...)
    Code:
    if pagetitle = 'homepage' then
    do whatever
    else
    do the other
    end if
    
    but, like i said, you will definitely need to know the basic syntax of the language before you can do *anything* like you're wanting to do. and no, sorry, i won't write it for you. ;) learning is half the fun!!!
     
  9. adom thread starter macrumors 6502

    Joined:
    May 27, 2006
    Location:
    UK
    #9
    Ahh you see, I think ive only ever used VB - or im presuming so from your comments. I took your ideas and created the following code:

    Code:
    <% pagetitle="member" %>
    
    
    <%
    if(pagetitle = "member") then nav1 = "../images/common/member_on.gif"
    %>
    
    <img src="<% Response.Write(nav1) %>">
    
    Now this does infact work. If I keep pagetitle as 'member' the member_on.gif displays in my page, and if I change the pagetitle value to anything else - no image is displayed.

    But how do I now progress with the ELSE statement? Do I simply write:

    Code:
    <%
    if(pagetitle = "member") then nav1 = "../images/common/member_on.gif"
    
    else
    
    nav1 = "../images/common/member_off.gif
    %>
    
    <img src="<% Response.Write(nav1) %>">
    
    ...because this method does not seem to work, and the server queries my ELSE placement and syntax's. Im getting there, I just need to include the "else display member_off.gif" part of the code, which im not fully sure how to do correctly.

    LOL. I think i need to read a book on this.
     
  10. Thom_Edwards macrumors regular

    Joined:
    Apr 11, 2003
    #10
    you're getting close! i don't know if you copy/pasted the code, so you may can disregard this. you never closed the " on the nav1 = "../images/common/member_off.gif line. also, you never did an 'end if' to close the if statement. if you never close the if statement, everything that follow it (even things outside of the <% %> tags) is included.

    that being said, i'm not sure what else it could be. your code likes fine, otherwise. maybe take a peek at http://www.vbtutor.net/lesson7.html.
     
  11. adom thread starter macrumors 6502

    Joined:
    May 27, 2006
    Location:
    UK
    #11
    Yeah I getting their. :eek:

    Basically with this code:

    Code:
    <%
    if(pagetitle = "homepage") then imagename = "../images/common/extension_on.gif"
    
    
    else
    
    imagename = "../images/common/extension_on.gif"
    
    end if
    
    %>
    
    <img src="<% Response.Write(imagename) %>">
    I get the following error from the server:
    I shall take your advice and start with the basics. As this ELSE issue is not something I understand atm :confused: . Thankyou for your help mate! :D
     
  12. ThunderLounge macrumors 6502

    ThunderLounge

    Joined:
    Sep 20, 2006
    #12
    Hate to barge in, but my first question is simply "why ASP?"

    Is it from a particular open source portal or something you've chosen, or is there another deciding factor?

    PHP, baby. All the way.

    Random, rotating, whatever.

    Sorry, just had to ask because the use of asp intrigues me. As in, why people choose to use it. ;)
     
  13. eto macrumors member

    Joined:
    Apr 27, 2006
    Location:
    20,000 leagues under the sea and or Duluth
    #13
    ... or a css method would be to add an id to the body tags of each page such as <body id="home"> then add an id to your navigation img tags such as id="x-home"

    and for your style sheet include:

    #a:hover, body#home #x-home a{
    background: url(your_image.xxx);
    }

    this will give you your "on" image for hover and selected states.
     

Share This Page