www.webdeveloper.com
Results 1 to 4 of 4

Thread: Help with Photo and Text Display

  1. #1
    Join Date
    Mar 2011
    Posts
    2

    Help with Photo and Text Display

    Hi everyone! I'm hoping one of you expert JS coders can help me figure out how to do this. I work for a non-profit arts organization which is currently doing a website redesign. We'd like to implement an events listing in which a list of event descriptions (text) will be displayed on the right of the screen and an associated image will be displayed to the left. When an event text is clicked on, the image will change accordingly. In addition, we'd like to have some sort of indicator placed on the text to show which event is currently being displayed...either some kind of arrow or, even better, a border drawn around the text.

    I'd be very grateful for any ideas about how this might be accomplished. Thank you!

  2. #2
    Join Date
    Feb 2011
    Location
    israel
    Posts
    157
    thats easy
    here's an example HTML and code demo ( http://jsfiddle.net/moritana/EGLa6/ ) :
    HTML Code:
    <div id="a">
        <ul>
            <li>
                event 1
            </li>
            <li>
                event 2
            </li>
            <li>
                event 3
            </li>
            
        </ul>
    </div>
    <div id="b"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRNfZLVzOJR99MilHjPibTFOnB8jipvxtSTCeJdBYCiNX-s9NzU&t=1"></div>
    Code:
    function changeImg(source,LI) {
        img = document.getElementsByTagName('img').item(0);
        img.src = source;
        for (x=0; x<(ListItem.length); x++)
        {
            ListItem[x].style.border = 'none';
        }
        ListItem[LI].style.border = '1px solid red';
    }
    
    ListItem = document.getElementsByTagName('li');
    
    ListItem[0].onclick = function() {
        changeImg('http://www.astrosurf.com/re/tle_20070303_2246_8images_median.jpg',0);
    };
    ListItem[1].onclick = function() {
        changeImg('http://www.handsonuniverse.org/get_images/images/M51-0630sm-reagan.jpg',1);
    };
    ListItem[2].onclick = function() {
        changeImg('http://t0.gstatic.com/images?q=tbn:ANd9GcRNfZLVzOJR99MilHjPibTFOnB8jipvxtSTCeJdBYCiNX-s9NzU&t=1',2);
    };
    the html is the fake page, a list of "events" and an image container.
    in the code, the first function uses 2 variables, source and LI, stores the image element into a third variable.
    it changes the img source according to the variable "source", and clears all the border specifications for all li elements. then it changes the border for the li stored in the variable "LI".

    the statements coming after the function, store all the li elements into an array, and assign each an onclick event, storing the image source, and the li number into the function.

    you can convert all this structure to your purposes by adding the events to the list, change the way you get the elements so you won't accidentally get other images or list items, and create other onclick events as you need .
    you may also want to style it all with css, and if you add borders, make sure to change the border specifications in the first function from "none" to yours.

    questions?
    my blog.

  3. #3
    Join Date
    Mar 2011
    Posts
    2
    Thanks so much! This is perfect, and it's very generous of you to take your time to share this. One other question, if you have time: We'll need to populate the text and images from a database. While we know how to feed the event listings into the HTML unordered list, we haven't yet figure out a way to get the images from our database into the script. Any ideas?

    Thank you!

    Clay Greenberg
    Bloomingdale School of Music
    New York, NY

  4. #4
    Join Date
    Feb 2011
    Location
    israel
    Posts
    157
    you only need the sources of the images.
    for example:
    Code:
    ListItem[0].onclick = function() {
        changeImg('http://www.astrosurf.com/re/tle_20070303_2246_8images_median.jpg',0);
    };
    the setup is:
    "ListItem[index number, 0 is first].onclick = function() {
    changeImg('img source here', [the same index number]);}"
    all you have to do is match the list item index number to the onclick function, and make sure the second parameter in the function matches the list item.
    the image url you add is the image that will show up when you click on the list item.

    ... too confusing? >_<
    my blog.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles