• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How to link image with anchor function

#21
[eluser]elaniobro[/eluser]
Nope, can't figure out how to incoportate the 'onmouseover' and 'onmouseout' into the array correctly.

#22
[eluser]mohsin917[/eluser]
Smile Well its look like we have to make changing in img function Smile

#23
[eluser]elaniobro[/eluser]
I like the way you think. I'll just have to figure out how to put that into the img function in php. Rather new so bare with me this could take awhile!

Smile Tongue Smile

#24
[eluser]Eason[/eluser]
@elaniobro:
Putting img() function as the second parameter of anchor() function, just like what you do, is also an elegant way to create image anchor, IMO. I use my own version of anchor_img() just to avoid loading the html helper.

For incoportating the onmouseover and onmouseout attributes, I think it should be ok to put them into the options array of img(), in the same way as other attributes, e.g., img(array('src'=>'...', 'onmouseover'=>'...', 'onmouseout'=>'...')). But I never try this before because I usually use jquery to define javascript events.

#25
[eluser]elaniobro[/eluser]
[quote author="Eason" date="1268272828"]@elaniobro:
Putting img() function as the second parameter of anchor() function, just like what you do, is also an elegant way to create image anchor, IMO. I use my own version of anchor_img() just to avoid loading the html helper.

For incoportating the onmouseover and onmouseout attributes, I think it should be ok to put them into the options array of img(), in the same way as other attributes, e.g., img(array('src'=>'...', 'onmouseover'=>'...', 'onmouseout'=>'...')). But I never try this before because I usually use jquery to define javascript events.[/quote]

Yea, I've tried adding the 'onmouseover'=>'...', 'onmouseout'=>'...' didn't work for me. I should look back into this, I am sure it was a syntax thing, there are a lot of ",' etc.. going on.

Code:
<a>

needs to get put into the array, I'd assume something like this:
Code:
&lt;?= anchor('/thoughts/more/'.$row->id,
                                img(array(
                                          'src'=>'img/thoughts/readmore_a.jpg',
                                          'id'=>'readMore',
                                          'border'=>'0',
                                          'alt'=>'Read More'
                                          )
                                    ),
                                array(                                          
                                      'onmouseover'=>'readMore.src='.base_url().'img/thoughts/readmore_b.jpg'.';'.'"',
                                      'onmouseout'=>'readMore.src='.base_url().'img/thoughts/readmore_a.jpg'.';'.'"'
                                      )
                                );
                     ?&gt;

yet nada Sad is the above syntax correct? I think so, not getting errors

#26
[eluser]elaniobro[/eluser]
Ok, I think I see the problem. the above code outputs this:
Code:
<a href="http://www.example.com/5/index.php/thoughts/more/5"><img src="http://www.example.com/5/img/thoughts/readmore_a.jpg"  id="readMore"  border="0"  alt="Read More" /></a>

there is a missing (') right after "readMore.src" should be "readMore.src'" how can I modify the PHP code to include the missing(')??

I've tried doing:
Code:
'onmouseover'=>'readMore.src='.'''.base_url().'img/thoughts/readmore_b.jpg'.';'.'"'

but that does not work. nor does:
Code:
'onmouseover'=>'readMore.src='.'"'.base_url().'img/thoughts/readmore_b.jpg'.';'.'"'

#27
[eluser]mohsin917[/eluser]
Sorry elaniobro, I was not here. so it what's next did you get mouseover/out.. now?

If you will then let me know.

#28
[eluser]Quaze[/eluser]
So i was just looking for some answers on images enclosed in the anchor function and stumbled upon this thread.
Just wanted to make a small comment on the mouseover/mouseout problem if it hastn been fixed yet.
If you add a class to the image in the image array, you can specify the hover event in css.

And what if you just add the jscript mouseover/out to the image array in stead of to the anchor array?
havent tried it but imo worth trying out.

~Quaze
(still a php newbie)

#29
[eluser]mike7418[/eluser]
I tried adding an image link using the _parse_attributes to added the image attribute. problem was that it put the image attribute on the anchor tag.

So I wrote the following into url_helper.php that works for me:

Code:
/**
* Img Anchor Link
*
* Creates an anchor based on the local URL.
*
* @access    public
* @param    string    the URL
* @param    string    the link title
* @param    mixed    any attributes
* @param      string    the img src
* @param    mixed    the img_attributes
* @return    string
*/
if ( ! function_exists('img_anchor'))
{
    function img_anchor($uri = '', $title = '', $attributes = '', $img = '', $img_attributes = '')
    {
        $title = (string) $title;

        if ( ! is_array($uri))
        {
            $site_url = ( ! preg_match('!^\w+://! i', $uri)) ? site_url($uri) : $uri;
        }
        else
        {
            $site_url = site_url($uri);
        }

        if ($title == '')
        {
            $title = $site_url;
        }

        if ($attributes != '')
        {
            $attributes = _parse_attributes($attributes);
        }
        
        if ($img_attributes != '') {
            $img_attributes = _parse_img_attributes($img_attributes);
        }

        return '<a href="'.$site_url.'"><img src="'.$img.'"></a>';
    }
}

Then created _parse_img_attributes
Code:
/**
* Parse out the img_attributes
*
* Some of the functions use this
*
* @access    private
* @param    array
* @param    bool
* @return    string
*/
if ( ! function_exists('_parse_img_attributes'))
{
    function _parse_img_attributes($img_attributes, $javascript = FALSE)
    {
        if (is_string($img_attributes))
        {
            return ($img_attributes != '') ? ' '.$img_attributes : '';
        }

        $att = '';
        foreach ($img_attributes as $key => $val)
        {
            if ($javascript == TRUE)
            {
                $att .= $key . '=' . $val . ',';
            }
            else
            {
                $att .= ' ' . $key . '="' . $val . '"';
            }
        }

        if ($javascript == TRUE AND $att != '')
        {
            $att = substr($att, 0, -1);
        }

        return $att;
    }
}

#30
[eluser]umefarooq[/eluser]
well no need to create whole new function with already exist code you can use old helper function simply have look

Code:
if ( ! function_exists('anchor_img'))
{
    function anchor_img($uri = '',$img = '',$attributes = '',$title='')
    {
        return anchor($uri,img($img).$title,$attributes);
    }
}

image with attributes
anchor_img('uri','your_img.jpg','anchor_attributes')

img attributes you pass as array

anchor_img('uri',array('src'=>'your_img.jpg','class'=>'style','width'=>'100'),'anchor_attributes')


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2021 MyBB Group.