Transform a text hyperlink into an image by hovering over it

Question

Transform a text hyperlink into an image by hovering over it

Is there a way to turn a text hyperlink into an image when hovered over?

I've seen image rollovers, but I'm not sure how to code a text-to-image rollover.

I'm unsure where to start and which programming language to use—JavaScript, PHP, or jQuery?

I began with this code snippet:

<a href="#" onmouseover="(document.img.src)='SAM_2251.jpg';">Mouseover here</a>

<img name="img" alt="" border="0" />

However, this code displays the text along with the loaded image. I want the text to disappear completely once the image loads.

Any assistance would be greatly appreciated. Thank you!

javascript jquery html css

Answer 1

Answer №1

Here is a simple way to achieve this effect using only HTML and CSS with a background image:

HTML

<a href="#" class="hover_image">Hover over me</a>

CSS

a.hover_image:hover {
    background: url(/path/to/image) no-repeat center center;
    text-indent: -9999em;
}

You may need additional CSS to set the width and height of the a tag, but this should give you a good starting point.

Answer 2

Here is a simple way to achieve this effect using only HTML and CSS with a background image:

HTML

<a href="#" class="hover_image">Hover over me</a>

CSS

a.hover_image:hover {
    background: url(/path/to/image) no-repeat center center;
    text-indent: -9999em;
}

You may need additional CSS to set the width and height of the a tag, but this should give you a good starting point.

Answer 3

Answer №2

There are numerous methods to achieve this, one way is by using a CSS example like the one below:

give it a shot

Answer 4

There are numerous methods to achieve this, one way is by using a CSS example like the one below:

give it a shot

Answer 5

Answer №3

Transforming a link into an image upon hover, changing back to text when not hovered (using only CSS)

<style>
.changeable img
{
  display:none;
}
.changeable:hover span
{
  display:none;
}
.changeable:hover img
{
  display:inline-block;
}
</style>
<a href="http://www.example.com" class="changeable"><span>Hyper Text</span><img src="img.png" /></a>

If you prefer the link to permanently switch to an image (utilizing jQuery)

<style>
.changeable img
{
  display:none;
}
</style>
<a href="http://www.example.com" class="changeable"><span>Hyper Text</span><img src="img.png" /></a>

<script type="text/javascript">
$('.name').hover(function(){
  $(this).children('img').show();
  $(this).children('span').hide();
})
</script>

Answer 6

Transforming a link into an image upon hover, changing back to text when not hovered (using only CSS)

<style>
.changeable img
{
  display:none;
}
.changeable:hover span
{
  display:none;
}
.changeable:hover img
{
  display:inline-block;
}
</style>
<a href="http://www.example.com" class="changeable"><span>Hyper Text</span><img src="img.png" /></a>

If you prefer the link to permanently switch to an image (utilizing jQuery)

<style>
.changeable img
{
  display:none;
}
</style>
<a href="http://www.example.com" class="changeable"><span>Hyper Text</span><img src="img.png" /></a>

<script type="text/javascript">
$('.name').hover(function(){
  $(this).children('img').show();
  $(this).children('span').hide();
})
</script>

Answer 7

Answer №4

Below is a simple JavaScript implementation:


    <div id="link">    
        <a href="#" onmouseover="document.getElementById('link').style.display='none'; document.getElementById('hoverImage').style.display='block';">Mouseover here</a>  
    </div>
    <div id="hoverImage" style="display:none">
        <img name="img" alt="" border="0" src="img.JPG" onmouseout="document.getElementById('link').style.display='block'; document.getElementById('hoverImage').style.display='none';"/>    
    </div>

Answer 8

Below is a simple JavaScript implementation:


    <div id="link">    
        <a href="#" onmouseover="document.getElementById('link').style.display='none'; document.getElementById('hoverImage').style.display='block';">Mouseover here</a>  
    </div>
    <div id="hoverImage" style="display:none">
        <img name="img" alt="" border="0" src="img.JPG" onmouseout="document.getElementById('link').style.display='block'; document.getElementById('hoverImage').style.display='none';"/>    
    </div>

Answer 9

Answer №5

Suppose we have HTML code that looks like the example below:

<a href="http://www.example.com/image.png" class="textToImg">Some text</a>

This JavaScript code should be functional for converting text to an image:

function changeTextToImage(element){
    if (!element) {
        return false;
    }
    else {
        var img = document.createElement('img');
        img.src = element.href;
        element.removeChild(element.firstChild);
        element.appendChild(img);
    }
}

Check out this JS Fiddle link for a demonstration.

Answer 10

Suppose we have HTML code that looks like the example below:

<a href="http://www.example.com/image.png" class="textToImg">Some text</a>

This JavaScript code should be functional for converting text to an image:

function changeTextToImage(element){
    if (!element) {
        return false;
    }
    else {
        var img = document.createElement('img');
        img.src = element.href;
        element.removeChild(element.firstChild);
        element.appendChild(img);
    }
}

Check out this JS Fiddle link for a demonstration.

Answer 11

Answer №6

One way to achieve this effect is through the use of jQuery:

View Demo

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

<body>
<script type='text/javascript'>
$( function() {
  $("#imglink").hover(
    function () {
      $(this).attr('small',$(this).html());
      $(this).html($(this).attr('full'));
    },
    function () {
       $(this).html($(this).attr('small'));
    }
  );
});
</script>

<a herf="" id='imglink' full='<img border="0" src="someImage.png" width="163" height="37"/>'>Hover for image, rollout for text</a>

</body>
</html>

Answer 12

One way to achieve this effect is through the use of jQuery:

View Demo

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

<body>
<script type='text/javascript'>
$( function() {
  $("#imglink").hover(
    function () {
      $(this).attr('small',$(this).html());
      $(this).html($(this).attr('full'));
    },
    function () {
       $(this).html($(this).attr('small'));
    }
  );
});
</script>

<a herf="" id='imglink' full='<img border="0" src="someImage.png" width="163" height="37"/>'>Hover for image, rollout for text</a>

</body>
</html>

Transform a text hyperlink into an image by hovering over it

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Initializng an array with null values in Javascript

Creating custom ExpectedConditions with Protractor for detecting attribute changes

The Mongoose framework has initiated a request to access the nested schema

missing method in HTML/JavaScript

Unveiling the Technique: Adjusting Field Visibility When Dropdown is Altered

Knowing when to use a comma or a space in HTML attributes is crucial for proper formatting

Retrieve the Title from Tiles Option

Located at the lower section of the parent container

Steps for including a subdocument within a mongoose schema

Maintain component state in a React app when the page is re

Using AngularJS to convert a JSON object into an array

Leveraging the power of react routes for efficient navigation within a react-based application

Consistent max-width applied to various items using full HTML and CSS styling

Decoding a serialized string into an object

The ng-click function ceases to trigger after the $location dependency is included in the controller

Error in HTML code when trying to incorporate a JavaScript file

JQuery allows for multiple drag and drop functionalities, including events that occur after an object

fuzzy lettering on specific edges of three-dimensional cube

Tips for setting up my bot to pull random messages from a channel and send one when an autoresponse is activated

Rearrange elements with a custom breakpoint trigger