How to display an image on the javascript

Discussion in 'JavaScript' started by FabioFlash, Oct 6, 2008.

  1. #1
    Hi guys,

    Im having a problem with my code:
    If you go to www.searchtravelonline.co.uk
    there is a searchbox on the left side and it has a button called "advanced search" in which is an image.. the problem is when u click on it .. it opens up the advanced option, but if you close it clicking on "hide" i goes back to normal but the button that was the IMAGE doesnt show anymore and it shows text instead..

    im sending the javascript function...what i need to know i think is how to display an image instead of "<p>advanced search</p>"

    thats my .js:

    function showHideAnswer()
    {
    var numericID = this.id.replace(/[^\d]/g,'');
    var obj = document.getElementById('a' + numericID);
    var obj2 = "";

    if(obj.style.display=='block'){
    obj.style.display='none';
    if (numericID == 1 )document.getElementById("q1").innerHTML = "<p>Advanced Search</p>";
    if (numericID == 2 )document.getElementById("q2").innerHTML = "<p>Edit and recalculate</p>";
    if (numericID == 3 )
    if (numericID == 4 )document.getElementById("q4").innerHTML = "<p>Filter Results</p>";
    {
    obj2 = document.getElementById('d' + numericID);
    obj2.style.display='block';
    document.getElementById("q3").innerHTML = "<p>Read More</p>";
    document.getElementById("e3").innerHTML = ""; }

    }else{
    obj.style.display='block';
    if (numericID == 1 )document.getElementById("q1").innerHTML = "<p>Hide</p>";
    if (numericID == 2 )document.getElementById("q2").innerHTML = "<p>Hide</p>";
    if (numericID == 3 )
    if (numericID == 4 )document.getElementById("q4").innerHTML = "<p>Hide</p>";
    {
    obj2 = document.getElementById('d' + numericID);
    obj2.style.display='none';
    document.getElementById("q3").innerHTML = "";
    document.getElementById("e3").innerHTML = "<p>Hide</p>"; }



    }
    }


    function initShowHideContent()
    {
    var divs = document.getElementsByTagName('DIV');
    for(var no=0;no<divs.length;no++){
    if(divs[no].className=='question'){
    divs[no].onclick = showHideAnswer;
    }

    }
    }

    window.onload = initShowHideContent;
     
    FabioFlash, Oct 6, 2008 IP
  2. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #2
    well, you are kind of overwriting the contents ... :rolleyes:
    <!-- HERE STARTS ADVANCED SEARCH -->
    		        <div id="q1" class="question"><img src="images/bt_advanced_search.gif"></div>
    				<div id="a1" class="answer">
    ...
    
    HTML:
    here:
    if (numericID == 1 )document.getElementById("q1").innerHTML = "<p>Hide</p>";
    and then set it back to:
    if (numericID == 1 )document.getElementById("q1").innerHTML = "<p>Advanced Search</p>";
    perhaps you can set it back to '<img src="images/bt_advanced_search.gif" />' instead :D
     
    dimitar christoff, Oct 6, 2008 IP
  3. FabioFlash

    FabioFlash Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    but how to make it just go back to the image?
     
    FabioFlash, Oct 6, 2008 IP
  4. FabioFlash

    FabioFlash Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Sorry mate, but im actually a designer and some how i have to get this thing sorted.. its there any possibility to u be a little bit more clear for dummies like me... lol ?
     
    FabioFlash, Oct 6, 2008 IP
  5. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #5
    er:
    hence, replace with: if (numericID == 1 )document.getElementById("q1").innerHTML = '<img src="images/bt_advanced_search.gif" />';

    heh, i know, designers are the blondes of webdev. :)
     
    dimitar christoff, Oct 6, 2008 IP
  6. FabioFlash

    FabioFlash Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Yo m8, i actually tried that b4 and it shows an error on the sintaxe,,:(
     
    FabioFlash, Oct 6, 2008 IP
  7. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #7
    if you copy/paste this there won't be an error. you must observe the the correlation between single and double speechmarks.

    i see you have fixed your syntax error by escaping it with a \ :

    if (numericID == 1 )document.getElementById("q1").innerHTML = "<img src=\"images/bt_advanced_search.gif\" />";

    you will notice in my post i said:
    if (numericID == 1 )document.getElementById("q1").innerHTML = '<img src="images/bt_advanced_search.gif" />';

    doing it thus does not warrant escaping as each pair is encapsulating bits w/o conflicts. glad to see it works now anyway.
     
    dimitar christoff, Oct 6, 2008 IP