Member Avatar for Elvi

Hello!
How to open a link in another page created? for example.
<a href="" ><img src=""></a> <----- this image, to open in this -----> page. (this page have other design)
Thanks in advance!

  • 3 Contributors
  • 4 Replies
  • 185 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by cereal

Dani AI

Generated

If the goal is "click an image and open it in a differently‑designed page" there are two practical routes: a dedicated static HTML per image (simple, what hinted at) or a single template that renders different images/content on request (what pointed toward). Use the static route when each image needs its own handcrafted layout; use a template when you want one page that can display many images with consistent header/footer but different body content, and when you need shareable URLs.

For a safe, maintainable dynamic template:

  • Accept an identifier (an ID or slug is safer than raw filenames).
  • On the server map that identifier to a known image record (filename, caption, title, alt text).
  • Strongly validate before serving: allow only specific extensions, ensure the file exists inside your images directory, and reject anything that looks like a path traversal attempt.
  • Render the page with unique title/meta tags so each image page can be bookmarked/shared.

Example of a simple server-side validation (PHP-style pseudocode):

$allowed = ['jpg','jpeg','png','gif'];
$img = $_GET['img'] ?? '';
$ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));
$dir = __DIR__ . '/images/';
if (!in_array($ext, $allowed) || !is_file($dir . $img)) { http_response_code(404); exit; }
$filepath = realpath($dir . $img);
if (strpos($filepath, realpath($dir)) !== 0) { http_response_code(403); exit; }

Other practical tips: use descriptive alt and a caption for accessibility; give each image page its own meta/open‑graph tags for sharing; if you open pages in a new tab use target="_blank" rel="noopener noreferrer"; prefer absolute or root‑relative CSS/asset paths on the new page so its design loads regardless of where the link is clicked from. If you only want a quick preview instead of a full page, a JS lightbox is a simpler UX—but still create a shareable URL if the image should be linkable.

Recommended Answers

All 4 Replies

Member Avatar for Lau_1

Try this,

<a href="page.html"><img src="img_to_the_path" alt="image_description"/></a>
Edited by Lau_1
Member Avatar for Elvi

. thanks for your answer but this is not what im looking for.
I want that my photo (for example) open in another .html page (designed) with another structure.
@lau 1. thanks for ur answer, this is not what im looking for.

Member Avatar for cereal

Hmm, I'm not sure I've understood your request.

Let's try: you have to define the image in the destination page, which can be done with a static or a dinamic approach.

When using a static method just create the page that will show a pre-defined image:

page.photo01.html

And point the browser to that specific page.

When using a dynamic method you create a container, a page that can elaborate and display the contents accordingly with the sent input.

The input can be sent by using GET and POST methods, which are HTTP verbs to access web resources. Below I'm going to show you a simple GET request approach:

You have to set a query string to the opening link so you can send the file name, for example:

<a href="page.php?img=photo01.jpg">
    <img src="/images/photo01.jpg">
</a>

Note page.php?img=photo01.jpg in the href attribute, you have to use a PHP file (or another server side scripting language), because you need to access the query string parameters.

So, in the page.php file you write something like this:

<?php

    $img   = array_key_exists('img', $_GET) ? basename($_GET['img']) : FALSE;

    # web path, used to display the file in the browser
    $path  = '/images/';
    $image = $path . $img;
?>
<!DOCTYPE>
<html>
...

<!-- display image here -->
<?php
    # display the image
    if($img) echo "<img src=\"{$image}\">";

    # default image (not required)
    else echo "<img src=\"/images/default.jpg\">";
?>

If you don't want to use server side languages, you can go with Javascript and read the query string from there. It's up to you.

If this still does not answer to your question, please add an extended example and information.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.