WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] add a immage over existing image (11 posts)

  1. TataVostru
    Member
    Posted 4 years ago #

    hy i want to add a image over the content image....

    I want to look like this :

    http://trailer-youtube.com/images/toptrailere.jpg

    The image is this:

    http://www.trailer-youtube.com/wp-content/themes/filme/images/trailerbg.png

    My site is http://www.trailer-youtube.com

    If enny body want to help pleas post hear the solution

  2. esmi
    Forum Moderator
    Posted 4 years ago #

    If those arrows are meant to fire something - such as run a trailer or just link to another page - you're going to have to do a lot more than just drop an arrow image on top of the individual images (which is difficult enough).

  3. TataVostru
    Member
    Posted 4 years ago #

    esmi i want to make the trailerbg.png image to apear over post image only in front.....

    this is the code...

    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <div class="front_trai">
    <div class="fr">
    <div class="trai">
    <?php $homethumb = get_post_meta($post->ID,'homethumb', true);  ?><a href=" <?php the_permalink() ?>" rel="bookmark" title="<?php printf(__(' %s', 'kubrick'), the_title_attribute('echo=0')); ?>"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/<? echo strtolower($homethumb); ?>.jpg" width="95" height="140" alt="" title="<?php printf(__('%s', 'kubrick'), the_title_attribute('echo=0')); ?>" /></td>
    </div>
    <div class="trai_link">
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('%s', 'kubrick'), the_title_attribute('echo=0')); ?>"><?php the_title(); ?></td>
    </div>
    </div>
    </div>
    <?php endwhile; ?>
    <?php if ($prev_link || $next_link): ?>
    <div class="navigation">
    	<div class="alignleft"><?php echo $next_link; ?></div>
    	<div class="alignright"><?php echo $prev_link; ?></div>
    </div>
    <?php endif; ?>
    <?php else : ?>
    <h2 class="center"><?php _e('Not Found', 'kubrick'); ?></h2>
    <p class="center"><?php _e('Sorry, but you are looking for something that isn’t here.', 'kubrick'); ?></p>
    <?php if(function_exists('get_search_form')) get_search_form(); ?>
    <?php endif; ?>
  4. TataVostru
    Member
    Posted 4 years ago #

    it is link tho the respective post

  5. esmi
    Forum Moderator
    Posted 4 years ago #

    Frankly I don't think that this can be done using PHP, XTML & CSS in any kind of reliable, cross-browser, manner. There might be a JavaScript method that can do it but I'm afraid I don't know it. Sorry.

  6. wizardregis
    Member
    Posted 4 years ago #

    You are lucky I like these kind of problems ;)
    I haven't tested it in a WordPress environment since I cant be arsed to setup custom fields and such. But I tried it with pure HTML and it worked fine.

    The cover is a normal image, but inside the link we have a SPAN tag that acts as the arrow-placeholder. It is set to position:absolute, and since the wrapper (A) is set to position:relative the arrow will align itself to it.

    CSS:

    .covers a { display:block; width:95px; height:140px; position:relative; }
    .covers a span { width:100%; height:100%; display:inline-block; background:url('trailerbg.png') center center no-repeat; position:absolute; top:0; left:0; }

    XHTML:

    <div class="covers">
    	<?php $homethumb = get_post_meta($post->ID,'homethumb', true);  ?>
    	<a href=""><span></span><img src="<?php bloginfo('url'); ?>/wp-content/uploads/<? echo strtolower($homethumb); ?>.jpg" alt="" width="95" height="140" /></a>
    </div>

    There are more ways to solve the problem, such as having the cover as a background-image, but I think using position is far easier.

  7. esmi
    Forum Moderator
    Posted 4 years ago #

    That's the kind of approach that I was thinking of but will it work with IE7 or below without seriously screwing the page up? IE is a right pain with positioning.

  8. wizardregis
    Member
    Posted 4 years ago #

    I checked it now in IE8, and it works fine, except it doesn't show the "hand" when you hover over it. But you can just add .covers a span { cursor:hand; } and that will be fixed.

    As for previous versions I can't test on this computer. But you can just add some codes so those version ignore it if they can't handle it.

  9. TataVostru
    Member
    Posted 4 years ago #

    i give it a try.. i will notice you if it work..

  10. TataVostru
    Member
    Posted 4 years ago #

    it show ok but way it show the tite duplicate in internet explorer?

    <div class="trailere_t">TOP Trailere <div class="trailere_link"><a href="http://www.trailer-youtube.com" title="mai multe trailere">mai multe trailere</a></div></div>
    <div class="art-Post-inner art-article">
    <h2 class="art-PostHeaderIcon-wrapper">
    <span class="art-PostHeader">
    </a></span>
    </h2>
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <div class="front_trai">
    <div class="fr">
    <div class="trai">
    <div class="covers">
    <?php $homethumb = get_post_meta($post->ID,'homethumb', true);  ?><a href=" <?php the_permalink() ?>" rel="bookmark" title="<?php printf(__(' %s', 'kubrick'), the_title_attribute('echo=0')); ?>"><span></span><img src="<?php bloginfo('url'); ?>/wp-content/uploads/<? echo strtolower($homethumb); ?>.jpg" width="95" height="140" alt="" title="<?php printf(__('%s', 'kubrick'), the_title_attribute('echo=0')); ?>" /></td>
    </div>
    </div>
    <div class="trai_link">
        <a href="<?php the_permalink()?>" rel="bookmark" title="<?php printf(__('%s', 'kubrick'), the_title_attribute('echo=0')); ?>"> <?php the_title(); ?></td>
    
    </div>
    </div>
    </div>
    <?php endwhile; ?>
    <?php if ($prev_link || $next_link): ?>
    <div class="navigation">
    	<div class="alignleft"><?php echo $next_link; ?></div>
    	<div class="alignright"><?php echo $prev_link; ?></div>
    </div>
    <?php endif; ?>
    <?php else : ?>
    <h2 class="center"><?php _e('Not Found', 'kubrick'); ?></h2>
    <p class="center"><?php _e('Sorry, but you are looking for something that isn’t here.', 'kubrick'); ?></p>
    <?php if(function_exists('get_search_form')) get_search_form(); ?>
    <?php endif; ?>
  11. TataVostru
    Member
    Posted 4 years ago #

    ennybody?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.