Connecting a picture to a web address using the <img class> tag

Question

Connecting a picture to a web address using the <img class> tag

I'm facing a major issue with the "fade script" I added to my portfolio. It's designed to fade between thumbnails using jQuery and CSS, but it relies on 2 img classes that I can't seem to link properly.

Basically, I want to link the image green.jpg to a specific URL (a youtube clip in a lightbox).

Does anyone have a solution for this problem?

Here is the snippet of HTML:

<div class="item">
            <div id="cf">
              <a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">
                <img class="bottom" src="img/green.jpg" border="0" />
              </a>
              <img class="top" src="img/a_childish_letter.jpg" />
            </div>
</div>

And here is the corresponding CSS:

#cf {
  position:relative;
  height:200px;
  width:310px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity .7s ease-in-out;
  -moz-transition: opacity .7s ease-in-out;
  -o-transition: opacity .7s ease-in-out;
  transition: opacity .7s ease-in-out;
  cursor:pointer;
}

#cf img.top:hover {
  opacity:0;
}

Your help would be greatly appreciated! Also, feel free to visit the page at for more context.

Best regards, Axel

jquery html css image

Answer 1

Answer №1

To resolve the issue, make sure to include the anchor tag for both images or adjust the z-index of the green image.

Here is the first solution:

Replace this code snippet:

<div class="item">
            <div id="cf">
              <a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">
                <img class="bottom" src="img/green.jpg" border="0" />
              </a>
              <img class="top" src="img/a_childish_letter.jpg" />
            </div>
</div>

With this updated code:

<div class="item">
            <div id="cf">
              <a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">
                <img class="bottom" src="img/green.jpg" border="0" />
              <img class="top" src="img/a_childish_letter.jpg" />
              </a>
            </div>
</div>

As for a second solution, you can try adjusting the z-index property of the ".bottom" class like so:

.bottom{
    z-index: 1;/* Consider using higher numbers or adding !important */
}

I have tested this in Google Chrome and it successfully resolved the issue!

Answer 2

To resolve the issue, make sure to include the anchor tag for both images or adjust the z-index of the green image.

Here is the first solution:

Replace this code snippet:

<div class="item">
            <div id="cf">
              <a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">
                <img class="bottom" src="img/green.jpg" border="0" />
              </a>
              <img class="top" src="img/a_childish_letter.jpg" />
            </div>
</div>

With this updated code:

<div class="item">
            <div id="cf">
              <a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">
                <img class="bottom" src="img/green.jpg" border="0" />
              <img class="top" src="img/a_childish_letter.jpg" />
              </a>
            </div>
</div>

As for a second solution, you can try adjusting the z-index property of the ".bottom" class like so:

.bottom{
    z-index: 1;/* Consider using higher numbers or adding !important */
}

I have tested this in Google Chrome and it successfully resolved the issue!

Answer 3

Answer №2

// Extracting image links
var topImageLink = $('div#cf').children('img.top').attr('src');

var bottomImageLink = $('div#cf').find('a').children('img.bottom').attr('src');

// Changing image URLs
$('div#cf').children('img.top').attr('src', 'new_image.jpg');

$('div#cf').find('a').children('img.bottom').attr('src', 'new_image.jpg');

Answer 4

// Extracting image links
var topImageLink = $('div#cf').children('img.top').attr('src');

var bottomImageLink = $('div#cf').find('a').children('img.bottom').attr('src');

// Changing image URLs
$('div#cf').children('img.top').attr('src', 'new_image.jpg');

$('div#cf').find('a').children('img.bottom').attr('src', 'new_image.jpg');

Answer 5

Answer №3

Experience the magic by saving this code as a HTML file and opening it in your browser:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <div class="item">
            <div id="cf">
              <a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" 

title="caption">
                <img class="bottom" src="img/green.jpg" border="0" />
              </a>
              <img class="top" src="img/a_childish_letter.jpg" />
            </div>
</div>

<button>Fade Image with top class</button>
<button>Fade Image with bottom class</button>
<script>
$("button:first").click(function() {
  $('div#cf').children('img.top').fadeToggle("slow", "linear");
});

$("button:last").click(function () {
  $('div#cf').find('a').children('img.bottom').fadeToggle("slow", "linear");
});
</script>
</body>
</html>

Answer 6

Experience the magic by saving this code as a HTML file and opening it in your browser:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <div class="item">
            <div id="cf">
              <a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" 

title="caption">
                <img class="bottom" src="img/green.jpg" border="0" />
              </a>
              <img class="top" src="img/a_childish_letter.jpg" />
            </div>
</div>

<button>Fade Image with top class</button>
<button>Fade Image with bottom class</button>
<script>
$("button:first").click(function() {
  $('div#cf').children('img.top').fadeToggle("slow", "linear");
});

$("button:last").click(function () {
  $('div#cf').find('a').children('img.bottom').fadeToggle("slow", "linear");
});
</script>
</body>
</html>

Connecting a picture to a web address using the <img class> tag

Answer №1

Answer №2

Answer №3

Similar questions

How to insert space after every item generated by ng-repeat in AngularJS

What is the best way to use jQuery to only display the form that is checked among the 3 forms shown by checkboxes?

Struggling with the Nivo slider not loading properly?

Update and renew dropdownlist data with the help of jQuery

Trouble with the functionality of the Bootstrap collapse button

What can be done to prevent the aspect ratio from being altered?

Creating a tab resizing effect similar to Chrome using only CSS

The local HTTP server is having trouble establishing a connection with the Firebase user

What could be causing my Ionic button to not initialize in the expected state while using ngIf with a boolean property connected to an Ionic checkbox?

Issue with CSS color gradient transparency

Tips for validating date input in a TextBox using JQuery on an ASP.NET platform:

What is the best way to adjust the height of a dropdown box in an angular application?

The decrementing of jQuery.ajax.active or jQuery.active is not working in Chrome

What is the best way to define the relative path and folder paths in HTML and CSS when working in Visual Studio 2012?

Trouble Navigating the DOM

I encountered an issue where I am unable to subtract from jQuery's .outerHeight() within an if statement

The Three JS on the website is error-free, yet it fails to function properly

What is the best way to retrieve declared functions within the done() scope of a jQuery plugin that handles JSON requests?

Dropdown menu featuring a customizable input field

How can I modify my code to ensure that trs and th elements are not selected if their display property is set to none?