Displaying an image with Jquery on hover

Edit2:

Hello Everyone,

I'm looking to implement a hover effect over the "durchwahl" text that displays a profile image when hovered. However, I am facing an issue where the image moves out of the visible area at the bottom of my page. Is there a way to fix this? Currently, I am using jQuery for displaying the popup image at the mouse position:

index.php : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=encoding">
<meta http-equiv="refresh" content="60">
<meta http-equiv="content-type" content="text/html; charset=ISO 8859-1">
<script src="includes/jquery.js" type="text/javascript"></script>
<script src="includes/main.js" type="text/javascript"></script>
<script type="text/javascript">
    function show_confirm(user_id,status,freitext)
    {
        if (confirm("TeamViewer freigeben?"))
        {
            window.location.href="insert.php?user_id="+user_id+"&status="+status+"&freitext="+freitext+"&action=free_all_tv";
        }
    else
        {
            void('');
        };
    }

    function openWindow(Adresse)
    {
        MeinFenster = window.open(Adresse, "Zweitfenster", "width=400,height=110,left=100,top=200,resizeable=no");
        MeinFenster.focus();
    }

    function openpic(Pic)
    {   
        MeinFenster = window.open(Pic, Pic, "width=300,height=406,left=100,top=200,resizeable=no");
        MeinFenster.focus();
    }

    function change(href)
    {
        window.location.href=href;
    }
</script>

<link rel="stylesheet" type="text/css" href="includes/style.css">
<title>Anwesenheit</title>
</head>

style.css:

@CHARSET "ISO-8859-1";
body {
font-family: verdana;
font-size: 75%;
text-decoration: none;
}



a{
text-decoration: none;     
color: #000000; 
   }

td,th{
border-radius:10px;
}

table{
border-spacing: 1px 5px;

}


#container
{

  display: inline-block; 
  width: 100%;          
  position: relative;   

}

#preview{
margin-left:-10%;
position:absolute;
border:1px solid #ccc;
background:#333;
padding:1px;
}


#Buttons {
-webkit-box-shadow: 0px 0px 18px -5px #000000;  
border-radius:10px;
cursor:pointer; 
font-size:15px;   
width:auto;
margin-bottom:5px;
margin-right:2px;
margin-left:2px;
}



#Buttons:hover{
  -webkit-transform:scale(1.1);
  -moz-transform:scale(1.1);
  transform:scale(1.1); 
}


#BButton {
-moz-box-shadow: 0px 0px 34px -5px #000000;
-webkit-box-shadow: 0px 0px 34px -5px #000000;
box-shadow: 0px 0px 10px -5px #000000;
-moz-border-radius:0px;
-webkit-border-radius:6px;
border-radius:10px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:15px;
padding:2px 4px;
text-decoration:none;
padding: 5px;


}

#Remote {
-moz-box-shadow: 0px 0px 34px -5px #000000;
-webkit-box-shadow: 0px 0px 34px -5px #000000;
box-shadow: 0px 0px 10px -5px #000000;
-moz-border-radius:0px;
-webkit-border-radius:6px;
border-radius:10px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:15px;
padding:2px 4px;
text-decoration:none;
padding: 5px;
width: 185px;   
}

#Koffer {
-moz-box-shadow: 0px 0px 34px -5px #000000;
-webkit-box-shadow: 0px 0px 34px -5px #000000;
box-shadow: 0px 0px 10px -5px #000000;
-moz-border-radius:0px;
-webkit-border-radius:6px;
border-radius:10px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:15px;
padding:2px 4px;
text-decoration:none;
padding: 5px;
width: 135px;   
}

#Dongle {
-moz-box-shadow: 0px 0px 34px -5px #000000;
-webkit-box-shadow: 0px 0px 34px -5px #000000;
box-shadow: 0px 0px 10px -5px #000000;
-moz-border-radius:0px;
-webkit-border-radius:6px;
border-radius:10px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:15px;
padding:2px 4px;
text-decoration:none;
padding: 5px;
width: 145px;   
}

#Server {
-moz-box-shadow: 0px 0px 34px -5px #000000;
-webkit-box-shadow: 0px 0px 34px -5px #000000;
box-shadow: 0px 0px 10px -5px #000000;
-moz-border-radius:0px;
-webkit-border-radius:6px;
border-radius:10px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:15px;
padding:2px 4px;
text-decoration:none;
padding: 5px;
width: 115px;   
}

#Testone {
-moz-box-shadow: 0px 0px 34px -5px #000000;
-webkit-box-shadow: 0px 0px 34px -5px #000000;
box-shadow: 0px 0px 10px -5px #000000;
-moz-border-radius:0px;
-webkit-border-radius:6px;
border-radius:10px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:15px;
padding:2px 4px;
text-decoration:none;
padding: 5px;
width: 145px;   
}

#Testtwo {
-moz-box-shadow: 0px 0px 34px -5px #000000;
-webkit-box-shadow: 0px 0px 34px -5px #000000;
box-shadow: 0px 0px 10px -5px #000000;
-moz-border-radius:0px;
-webkit-border-radius:6px;
border-radius:10px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:15px;
padding:2px 4px;
text-decoration:none;
padding: 5px;
width: 110px;   
}

#bottom {
border-spacing: 10px 5px;
}

functions.php:

$value = $value . "<a  href='images/".getPictureName($nutzer['vorname'],$nutzer['nachname']).".jpg' class='preview'> <img   class='img' src='images/phone.jpg' border='0' width='12' height='12'>".$nutzer['durchwahl'];
javascriptjqueryhtmlcss

Answer №1

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").hover(function(){
          $('img').css({'display':'block'});
        },function(){
         $('img').css({'display':'none'});
    });
});
</script>
</head>
<body>

<p>Hover over this paragraph to see the image display.</p>
<img src='a.png' style='display:none'>
</body>
</html>

Give it a try. The image will show when you hover on the paragraph.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a solution to the issue of Javascript URL regex returning a comma at the end of the URL?

I'm facing an issue with my regex for matching URLs. It works well for strings containing www. or starting with http://, but it introduces an unwanted comma in the matched URLs. For example, when I extract a URL from a textarea, apply the regex, and r ...

javascriptjqueryregex

Unexpected token "," in jQuery UI autocomplete error

Using the autocomplete feature works perfectly on my PC. However, I encounter an error when trying to test it on a mobile device. Do I need to utilize jQuery mobile in order for jQuery to function properly on mobile devices? Error message on line 3 of th ...

javascriptjqueryjquery-mobileautocomplete

Tips for highlighting text in a textarea using jQuery or JavaScript

I'm intrigued by Facebook's functionality. They utilize textareas in their comments and status sections, but whenever I tag someone in a post, the selected text is highlighted with a light blue background within the textarea. As far as I know, th ...

javascriptjquerycss

What is the best way to pass $http and $scope using require?

.controller('Ctrlajax', ['$scope', 'version','$sce', '$resource', '$http', function ($scope, version,$sce,$resource,$http) { $scope.answer = 'Waiting for response from the server.....& ...

javascriptangularjs

"Is there a way to position a button at the bottom using HTML and

Is there a way to position my button after the reviews stars? The browser output screenshot shows the desired layout: https://i.sstatic.net/nh63E.png I want my post review button to be displayed after the reviews stars, not in a row. Here is the code s ...

htmlcss

Save information to chrome's storage system

I have the need to save favorite and deleted IDs in my database. I created two functions for this purpose: function ADD_BLOCKED(id) { chrome.storage.local.get("blocked", function (data) { if (data.blocked == null) data.blocked = [] ...

javascript

"Encountering issues when trying to POST data from an Ember component to an

When attempting to post from a component in my Ember app to my Express API, I am encountering the following error: SyntaxError: Unexpected token V in JSON at position 0 Upon inspecting the response in the network inspector on Chrome, I found this error m ...

javascriptnode.jsjsonexpressember.js

What does ngModel look like without the use of square brackets and parenthesis?

Can you explain the usage of ngModel without brackets and parentheses in Angular? <input name="name" ngModel> I am familiar with [ngModel] for one-way binding and [(ngModel)] for two-way binding, but I am unsure what it means when ngModel ...

javascriptangulartypescript

Unable to connect to iframe using DDmenu

I am facing an issue with my CSS banner/menu. The links (buttons) are supposed to target an iframe on the same page, but it's not functioning as expected. When clicking on the links, nothing appears in the iframe except for the source page. This resul ...

htmlcssiframe

Tips on linking a condition-reaction to document.querySelector

I am struggling to connect the condition-reactions to the input id of passid. I am unsure where to place the document.querySelector() method in order to link the indexed conditions correctly. Below is the code snippet: <!doctype html> <html> ...

javascripthtmlmethodsconditional-statements

What causes the AJAX JSON script to output an additional 0?

Within my WordPress website, there is an AJAX function that reaches out to a PHP function in order to retrieve a specific value from a transient record stored in the Database. Whenever I trigger this function with jQuery, I successfully receive the result ...

javascriptjqueryajaxjsonjsonp

The upcoming challenge with Express middleware

I'm a bit confused about how to properly call Express middleware in sequence. I want the next middleware to only execute once the previous one has finished. I used to believe that I needed to call next() for this to occur, but apparently that's n ...

javascriptnode.jsexpressmiddleware

Using SweetAlert and jQuery to enhance form inputs

I'm facing an issue with my form that has two states. The first state requires inputs to be filled, while the second state requires them to be empty. I'm using Sweet Alert to display the input result, but for some reason, my if-else statement is ...

jqueryhtmlcssformsif-statement

Enhance your search experience with Vue.js by highlighting important keywords across multiple search

I'm working on implementing a search feature that will bold the matching parts. For example, if I have the name 'John' and search for 'Jo Joh' in the same string, I want it to bold the part of 'John' that has the most mat ...

javascriptarraysvue.js

Preventing Divs from Wrapping in a Floating Layout (Thumbnail)

I have my own website which you can check out by clicking here. I am facing an issue where the text wraps around the image when it is a small image and there is a large amount of text. <div class="page-list-ext-item"> <div class="page-list-ext-i ...

cssword-wrap

Encountered an issue during the Jest test where the error message states 'Cannot call Class constructor Stack without using the keyword 'new''

I have encountered an issue with my Jest test for an AWS CDK configuration import { expect as expectCDK, matchTemplate, MatchStyle } from '@aws-cdk/assert'; import * as cdk from '@aws-cdk/core'; import { KmsMultiregionPrincipalKey } fro ...

javascripttypescriptecmascript-6jestjsaws-cdk

HTML: Issue with H1 alignment in class

I'm a beginner with HTML and I've been attempting to center the H1 using a CSS class, but it doesn't seem to be working for me. Here's my code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> ...

htmlcss

Ways to update images without having to reload the page following an ajax request

My current script uploads images to the server and updates the image source in HTML upon completion. However, I am facing an issue with my PHP code renaming the files to predefined names (ext-pix0.png, ext-pix1.png, etc.) during upload. This leads to the p ...

phpjqueryhtmlajax

Angular service to display an array of data

I have been experimenting with Angular, working on small exercises to improve my skills. I have managed to display objects in the controller but am struggling to use service and factory to display an array called "names" on a table. Can someone please revi ...

javascriptangularjsarraysangularjs-directiveangular-services

What is the best way to bring a function into another function from a separate file?

I am attempting to call the "changenavitemstate" function from the "Navbarlink" file. When I try to import the function into the file, I encounter an error. I have tried using props to access the function but have been unsuccessful. ...

javascriptreactjsfunctionimport