-1

I am trying to change the image opacity for only one of the images in the results of an xml file lookup. I want to give the appearance of selecting an image by showing a normal opacity for the clicked image, and half opacity for the other images. This code returns the images perfectly well, but for some reason it isn't changing the opacity on the click:

index.php:

<script>
    function showResult(str) {
        if (str.length==0) { 
            document.getElementById("livesearch").innerHTML="";
            document.getElementById("livesearch").style.border="0px";
            return;
        }
        if (window.XMLHttpRequest) {
            xmlhttp=new XMLHttpRequest();
        }
        else {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                        document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
                    document.getElementById("livesearch").style.border="1px solid #A5ACB2";
            }
        }
        xmlhttp.open("GET","php/livesearch.php?q="+str,true);
        xmlhttp.send();
    }
</script>
<div class="uploadarticle" style="cursor:pointer">
Add article from another site<br><br>
</div>
<div class="poppeduploadarticle">
<form method='post' action='php/uploadarticle.php'>
<input type="text" size="40" name="article_url" value="Url of article" onblur="if (this.value == '') {this.value = 'Url of article';}" onfocus="if (this.value == 'Url of article') {this.value = '';}">
<input type="text" size="25" name="article_caption" value="Caption" onblur="if (this.value == '') {this.value = 'Caption';}" onfocus="if (this.value == 'Caption') {this.value = '';}" onkeyup="showResult(this.value)">
<input type="hidden" id="article_image" name="article_image">
<input type="submit" value="Submit">
<div id="livesearch"></div>
<script type="text/javascript">
$(function(){
    $("#livesearch img").click(function() {
    $("#livesearch img").css('opacity','0.5');    
    $(this).css('opacity','1');   
    });
});
</script>
</form>
</div>

livesearch.php:

<?php
    $xmlDoc=new DOMDocument();
    $xmlDoc->load("articleimages.xml");

$x=$xmlDoc->getElementsByTagName('link');

//get the q parameter from URL
$q=$_GET["q"];

//lookup all links from the xml file if length of q>0
if (strlen($q)>0) {
    $hint="";
    for($i=0; $i<($x->length); $i++) {
        $y=$x->item($i)->getElementsByTagName('title');
        $z=$x->item($i)->getElementsByTagName('url');
        if ($y->item(0)->nodeType==1) {

            //find a link matching the search text
            if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
                if ($hint=="") {
                    $hint="<img width='80px' src='" . $z->item(0)->childNodes->item(0)->nodeValue . "' onclick=\"javascript:document.getElementById('article_image').value='".$z->item(0)->childNodes->item(0)->nodeValue."'\" >";
                }
                else {
                    $hint=$hint . "<img width='80px' src='" . $z->item(0)->childNodes->item(0)->nodeValue . "' onclick=\"javascript:document.getElementById('article_image').value='".$z->item(0)->childNodes->item(0)->nodeValue."'\" >";
                }
            }
        }
    }
}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint=="") {
    $response="no suggestion";
}
else {
    $response=$hint;
}

//output the response
echo "Please choose a related image:<br><br>".$response;
?>

livesearch.xml:

<pages>
<link>
<title>Coconut</title>
<url>http://www.website.com/images/coconut.jpg</url>
</link>
<link>
<title>Coconut2</title>
<url>http://www.website.com/images/coconut.jpg</url>
</link>
<link>
<title>Coconut3</title>
<url>http://www.website.com/images/coconut.jpg</url>
</link>
<link>
<title>Coconut4</title>
<url>http://www.website.com/images/coconut.jpg</url>
</link>
<link>
<title>Coconut5</title>
<url>http://www.website.com/images/coconut.jpg</url>
</link>
</pages>

1 Answer 1

0

I can see what you are trying to do and it's sort of on the right track, but there are a lot of things you need to sort out and check in your PHP and Javascript.

Can i ask why you don't just pull out the text within the elements from the XML document, use this text as the src of a number of image elements in your HTML and when these are loaded, and just use a little CSS to alter the opacity onHover?

Or have i not understood what you are trying to achieve?

1
  • I don't understand what injecting file strings from an xml document means :/
    – prince888
    Mar 2, 2014 at 2:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.