Repositioning the images to a new location

I've been having trouble moving the small images (thumbnails) on my page. They seem to be stuck in place on the left and I've tried adjusting their margins using a div id, but it hasn't had any effect.

Below are the relevant code snippets:

JavaScript

function showImage(imgName) {
    document.getElementById('largeImg').src = imgName;
    showLargeImagePanel();
    unselectAll();
}
function showLargeImagePanel() {
    document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
    if(document.selection) document.selection.empty();
    if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
    obj.style.visibility = 'hidden';
}

CSS

#largeImgPanel {
    text-align: center;
    visibility: hidden;
    position: fixed;
    z-index: 100; 
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(100,100,100, 0.5);
}

Html body 

<body>
    <img src="images/small1.png" style="cursor:pointer" onclick="showImage('images/large1.jpg');" />
    <img src="images/small2.jpg" style="cursor:pointer" onclick="showImage('images/large2.jpg');" />
    <img src="3_small.jpeg" style="cursor:pointer" onclick="showImage('3_large.jpeg');" />

    <div id="largeImgPanel" onclick="hideMe(this);">
        <img id="largeImg" margin: 0; padding: 0;" />
    </div>

</body>
</html>
htmlcssimage

Answer №1

When it comes to the three img tags, you'll need to adjust their style. Here's an example:

<img src="images/small1.png" class="smallimg" onclick="showImage('images/large1.jpg');" />
<img src="images/small2.jpg" class="smallimg" onclick="showImage('images/large2.jpg');" />
<img src="3_small.jpeg" class="smallimg" onclick="showImage('3_large.jpeg');" />

and

.smallimg {
    cursor: pointer;
    float: right;
    /* insert your desired position/top/left values here */
}

If you prefer them centered, you can try this approach:

<div style="text-align: center;">
    <img src="images/small1.png" class="smallimg" onclick="showImage('images/large1.jpg');" />
    <img src="images/small2.jpg" class="smallimg" onclick="showImage('images/large2.jpg');" />
    <img src="3_small.jpeg" class="smallimg" onclick="showImage('3_large.jpeg);" />
</div>

Answer №2

Here is a solution that I recommend trying:

HTML

<div class="container">
    <img src="http://www.bit-101.com/blog/wp-content/uploads/2009/05/ball.png" alt="" />
    <img src="http://ecx.images-amazon.com/images/I/41P44yRoAPL._SL75_SS50_.jpg" alt="" />
    <img src="http://ecx.images-amazon.com/images/I/41B9Qbj2CBL._SL75_SS50_.jpg" alt="" />
</div>

CSS

.container
{
    height: 50px; /* set img height */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px; /* adjust for half of the img height */
    margin-left: -75px; /* adjust for half of the total width of the images */
    overflow: hidden;
}

.container > img
{
    display: inline;
}

Visit this link for a live demo

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

The arrangement of <source> tags within the <audio> element can cause issues with browser compatibility

I'm having a slight issue with the audio files on my webpage. I've set up both MP3 and Ogg Vorbis files using FFmpeg to ensure compatibility with modern browsers. However, I've noticed that Safari only plays the audio when the MP3 file is li ...

htmlaudio

I prefer to not have the box-shadow showing up on top of the navigation bar

Check out this cool demo: View Demo I am looking to add a shadow effect above the footer section, but not above the navigation bar. nav{ background-color: blue; height: 100px; } main{ box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.5); background- ...

htmlcss

relocate HTML components

I've been trying to reposition HTML elements within the body of a webpage, but I'm struggling with getting a form tag to appear exactly in the center of the browser - and only that form tag. Can anyone offer guidance or suggest relevant topics fo ...

htmlcssmove

Prevent horizontal scrolling on mobile devices

To prevent vertical scrolling on mobile devices, I attempted using the CSS code: body {overflow-x:hidden} This successfully disables vertical scrolling in regular browsers. However, if there is an element wider than the screen on mobile, it still allows ...

jqueryhtmlcss

Enhancing the appearance of individual cells in jQuery DataTables

While working with jQuery DataTables, I have successfully managed to access row data and apply styling to the entire row. Below is the code snippet used to initialize the datatable: var $dataTable = $('#example1').DataTable({ "data": data, ...

javascriptjquerycssajaxdatatables

The local() function in CSS @font-face is limited to finding only the "regular" and "bold" font styles, not others

Recently, I added some new fonts (specifically Roboto) to my Linux Ubuntu PC and wanted to incorporate them into my CSS using the @font-face rule. However, I encountered an issue when specifying different font weights within the src: ; property as shown in ...

htmlcssfontsfont-facelocal

HTML5 Division Element Dimensions

I am currently modifying an HTML5 template. The default Bootstrap parameters were set as: col-sm-12 col-md-4 col-lg-4 col-sm-12 col-md-8 col-lg-8 This configuration allotted 20% of the screen width to text and 80% to images, but I want it reversed. Tex ...

csshtmltwitter-bootstrap-3

Verifying the selection state of a dynamically generated checkbox with JavaScript

I have a table with checkboxes. Each time a button is clicked, I dynamically add new checkboxes to the table like so: var cell3 = row.insertCell(2); cell3.innerHTML = '<input type="checkBox" value=\"selected?\" style="cursor:poin ...

javascripthtml

Changing the CSS class of the Bootstrap datetime picker when selecting the year

Is there a way to change the CSS style of the Bootstrap datetime picker control so that when selecting years, the color changes from blue to red? I attempted to do this with the following code: .selectYear { background-color:red!important; } However ...

javascripthtmlcsstwitter-bootstrap

I have a question regarding the CSS universal selector

I've been working on developing a website, but I'm having trouble with the universal selector. No matter how many times I try, it just won't work. If you'd like to see an example of what I'm dealing with, check out this link: https ...

css

Can you explain the distinction between the onclick(function(){}) and on('click',function(){}) functions in jQuery?

My goal is to dynamically load pages into a specific div using ajax. Here's my HTML code: <ul id="nav" class="nav" style="font-size:12px;"> <li><a href="#" id="m_blink">Tab1</a></li> <li><a href="#" id= ...

javascriptphpjqueryhtmlajax

TypeScript: displaying parameters

variable_field = [["S",".","."],[".","#","."],[".",".","T"]]; <ng-template ngFor let-array [ngForOf]="field_array" let-x="index"> <ng-t ...

htmlangulartypescript

Perform a Selenium action to click on each individual HTML 'a' tag on

I am attempting to automate clicking on all the "a" tags within a website using Selenium in Python. However, I found that all the "a" tags I want to click have the same structure as shown in the code snippet below. I tried clicking them by their class si ...

javascriptpythonhtmlseleniumweb-scraping

Tips for importing font files from the node_module directory (specifically otf files)

We cannot seem to retrieve the fonts file from the node module and are encountering this error message. Can't find 'assets/fonts/roman.woff2' in 'C:\Projects\GIT2\newbusinessapp\projects\newbusinessapp\src ...

javascriptcssnode.jsangularsass

When using window.open in Chrome on a dual screen setup, the browser will bring the new window back to the

When using the API window.open to open a new window with a specified left position in a dual screen setup (screen1 and screen2), Chrome behaves differently than IE and FF. In Chrome, if the invoking screen is on the right monitor, the left position always ...

javascripthtml

Creating tabbed content with a classless CSS design by utilizing radio buttons instead of the traditional unordered

I am attempting to transform the classless CSS and HTML provided below from a list format to using radio buttons and labels for tabbed content. My goal is to make it concise and avoid redundancy. Here is the setup of what I am aiming for: <nav> ...

htmlcss

Enigmatic void found beneath image surfacing

Similar Question: Dealing with Additional Space at the Bottom of an Anchor Tag Take a look at this example page here.. There seems to be a mysterious gap below the picture of the family, just before the gray-bordered (5px #333) div that holds the ima ...

htmlcssimage

Why might a responsive website automatically switch to mobile view?

My website has a responsive grid system that utilizes media queries with breakpoints. However, I am encountering an issue on IE8 where the "mobile version" of the site is being displayed as the default view even when the screen size is set to what should b ...

internet-explorercssresponsive-designmedia-queries

What is the best way to extract HTML using selenium.webdriver in Python?

Appreciate your attention, and please excuse any errors in my English. I am currently attempting to retrieve HTML from . The process involves entering some text into an input box and clicking a button, which triggers the following actions: Load the Yaho ...

javascriptpythonhtmlselenium

JavaScript error occurring when trying to validate Ajax response

I am attempting to create a report using a dynamically generated form. The form loads successfully through XMLHttpRequest, but the validation for the form fields does not seem to be working. I have experimented with using eval() and found that it only work ...

phpjavascripthtmlajax