Question

I got this html code:

<div class="imgContent">
    <div id="galleryImg">
        <img class="img_<?php echo $this->id ?>_1" width="1200" height="450" src="<?php echo $this->baseUrl('f/images/'.$this->image[1]) ?>" />
        <?php if($this->image[4]){ ?>
            <img class="img_<?php echo $this->id ?>_<?php echo $this->image[6] ?>" style="display:none" width="1200" height="450" src="<?php echo $this->baseUrl('f/images/'.$this->image[4]) ?>" />
        <?php } ?>
        <?php if($this->image[5]){ ?>
          <img class="img_<?php echo $this->id ?>_<?php echo $this->image[7] ?>" style="display:none" width="1200" height="450" src="<?php echo $this->baseUrl('f/images/'.$this->image[5]) ?>" />
        <?php } ?>
    </div>  
    <a id="prev" href="javascript:void(0)"></a>
    <a id="next" href="javascript:void(0)"></a>
</div>

And I want to add arrows from png file when hover on image. How to do this (image is changing now on click)

Answer 1

Assuming you meant to say that your a#prev and a#next should have arrows when you hover div#galleryImg not very sure if this is what you desire you could do it with pure css using something similar to this:

a#prev, a#next {
    display: inline-block;
    width: 20px;
    height: 20px;
}
div#galleryImg:hover + a#prev { background-image: url(prev.png); }
div#galleryImg:hover + a#prev + a#next { background-image: url(next.png); }

Of course you should adapt width and height to the correct sizes of your images and put correct urls for the images as well.