How to Use Link_To to Link an Image and a Text

link_to image_tag with inner text or html in rails

Why not just use a link to and image tag?

<%= link_to "hiii #{image_tag(yourimagepath)}", "link_path" %>

You could also try the appending done above (string + image_tag), but it will throw an error if one of those things becomes nil. Using interpolation, it will just show a blank image(or string) if it is nil.

For Rails 3, you will need to use html_safe:

<%= link_to "hiii #{image_tag(yourimagepath)}".html_safe, "link_path" %>

Text next to a link image

The float: left; means the element is floated to the left of the content within the same parent. Since you are wrapping the image inside of an <a></a> tag, the image is being floated to the left of the content within the <a>.

If you apply the float to the a instead of the img, then the a will be floated to the left of the content in its parent, as desired.

convert a text link to image link

@Alex solution is a better one, but if you could not add a class

$('a').each(function(){
var a = $(this)
if(a.text() == 'Image')
a.html('<img src="'+a.href+'" >')
})

http://jsfiddle.net/7AvJT/2/

php - find link to image in text and convert to link

how about these two links combined:

best way to determine if a URL is an image in PHP

PHP Regular Expression Text URL to HTML Link

$url="http://google.com/image.jpg";

function isImage( $url ){
$pos = strrpos( $url, ".");
if ($pos === false)
return false;
$ext = strtolower(trim(substr( $url, $pos)));
$imgExts = array(".gif", ".jpg", ".jpeg", ".png", ".tiff", ".tif"); // this is far from complete but that's always going to be the case...
if ( in_array($ext, $imgExts) )
return true;
return false;
}

$test=isImage($url);
if($test){
$pattern = '/((?:[\w\d]+\:\/\/)?(?:[\w\-\d]+\.)+[\w\-\d]+(?:\/[\w\-\d]+)*(?:\/|\.[\w\-\d]+)?(?:\?[\w\-\d]+\=[\w\-\d]+\&?)?(?:\#[\w\-\d]*)?)/';
$replace = '<a href="$1">$1</a>';
$msg = preg_replace( $pattern , $replace , $msg );
return stripslashes( utf8_encode( $msg ) );
}

added link to image and text only

There are a couple of ways to do this.

Codepen Demo (of both)

Firstly, just using a simple anchor tag inside the div with your text inside a heading tag

HTML

<div class="bg-image">
<a href="#"><h3>Events</h3></a>
</div>

CSS

.bg-image a {
height: 205px;
width: 322px;
border-style: solid;
border-width: 3px;
border-color: #9ad499;
margin-bottom: 7px;
border-radius: 10px;
position: relative;
display:block;
text-decoration:none;
background-image: url(http://mja.anytimeafter9.co.uk/sites/all/themes/MedicalJournalistsAssociation/images/mja1.jpg);
}

.bg-image a h3 {
position:absolute;
text-align:center;
width:100%;
bottom:0;
color:black;
}

The other relies on more structure and an inline image (that is, in the HTML itself)

HTML

<div class="inline-image">
<a href="#">
<img src=" http://mja.anytimeafter9.co.uk/sites/all/themes/MedicalJournalistsAssociation/images/mja1.jpg" alt="Sample Image" />
<h3>Events</h3>
</a>
</div>

CSS is similar with a couple of changes

.inline-image a {
display: block;
margin-left:10px;
border-style: solid;
border-width: 3px;
border-color: #9ad499;
margin-bottom: 7px;
border-radius: 10px;
position: relative;
}

.inline-image img {
display: block;
border-radius: 10px;
}

.inline-image a h3 {
position:absolute;
text-align:center;
width:100%;
bottom:0;
color:black;
}

How can I make an img and text link both link to the same place and both become active on hover independent of which one i am hovering over?

You could do this with CSS, or with Javascript. Without knowing your markup, and how your elements are laid out, it's not possible to determine which option is best.

CSS Option

a:hover span { color:red; }
<a href="1.html">
<img src="1.jpg" />
<span>Title: One</span>
</a>

In that example, we have our text and image both within a link. We are then modifying the color of the text on the :hover event.

Javascript (jQuery)

div.hovered p { color:red; }

<div class="preview">
<img src="1.jpg" />
<p>Title: One</p>
</div>

$("div.preview img").hover(
function () { $(this).parent().addClass("hovered"); },
function () { $(this).parent().removeClass("hovered"); }
);

This example showcases a solution that simply adds a class to the parent container, which in turn modifies the representation of the title. This event is controlled by hovering the image within the container.

Update:

Positioning your text isn't that difficult. The quick-and-easy method would be to position the parent container with relative, and the text with absolute:

<div class="container">
<a href="#">
<img src="1.jpg" />
<span class="title">Hello World</span>
</a>
</div>

div.container { position:relative; width:150px; }
div.container span.title { position:absolute; top:0; left:50px; width:100px; }

That's a quick example. You can modify the values to your needs.

How to link to a text area using a clickable image icon

You can achieve most of what you want without using Javascript. Instead of an anchor, use a label, so you can work with :focus:

label img {  transform: scale(0.5);  transition-duration: 0.2s;  }label img:hover {  cursor: pointer;  transform: scale(1);}input[type='text'] {  opacity: 0;  font-size: 30px;  transition-duration: 0.2s;}input[type='text']:focus {  opacity: 1;}
<label for="mercedes">  <img src="http://lorempixel.com/150/150/abstract/3"></label><label for="porsche">  <img src="http://lorempixel.com/150/150/abstract/5"></label><br /><input type="text" id="mercedes" placeholder="Mercedes" /><input type="text" id="porsche" placeholder="Porsche" />

how to create link text linking to an image file?

You mentioned jQuery in your comment to @James Allardice.

You could do something like this:

$('ul li a').click(function(){
var img = $(this).attr('href');
$('#content').html('<img src="' + img + '" />');
return false;
});

HTML

<ul>
<li><a href="tulip.jpg" id="tulip">Tulip</a></li>
<li><a href="rose.jpg" id="rose">Rose</a></li>
<li><a href="jasmine.jpg" id="jasmine">Jasmine</a></li>
</ul>

<div id="content"></div>

Fiddle: http://jsfiddle.net/jasongennaro/K7pTu/



Related Topics



Leave a reply



Submit