Problema con cambio de imagen al pasar cursor sobre widget

SalvaSanchiz · 7 May 2014

Mi primer post en este foro, seré directo. Llevo una semana con WordPress. Mi blog en construcción es CHEZACK.TV | EDM Music Portal

No consigo añadir correctamente el efecto que consiste en "cambiar una imagen por otra" cuando pasas el cursor por encima. Dicho "efecto" lo quiero aplicar sobre un widget llamado "Cherry Ads125x125" que me permite añadir un cuadro compuesto por 4 imágenes de 125x125px las cuales he insertado y modificado sus tamaños a mi aire, en la barra lateral de mi web/blog. Puede verse aquí: Example 1

El problema es que no se donde tengo que colocar los <divs> de cada imagen, no se ni DONDE ni COMO tengo que ponerlos. Tengo un theme padre que es Cherry Framework y en éste se aloja el plugin que he dicho, luego tengo un theme hijo de pago. Puede verse aquí: Music Fan Board WordPress Theme #48844

El código del CSS me ha quedado así:

Insertar CODE, HTML o PHP:

#imagen-youtube {
  background: url(http://chezack.tv/wp-content/uploads/2014/05/follow-us-on-youtube.png) no-repeat right;
  width: 182px ;
  height: 122px ;
}
#imagen-youtube:hover {
  background-position: left;
  width: 182px ;
  height: 122px ;
}
#imagen-twitter {
  background: url(http://chezack.tv/wp-content/uploads/2014/05/follow-us-on-twitter.png) no-repeat right;
  width: 182px ;
  height: 122px ;
}
#imagen-twitter:hover {
  background-position: left;
  width: 182px ;
  height: 122px ;
}
#imagen-facebook {
  background: url(http://chezack.tv/wp-content/uploads/2014/05/follow-us-on-facebook.png) no-repeat right;
  width: 182px ;
  height: 122px ;
}
#imagen-facebook:hover {
  background-position: left;
  width: 182px ;
  height: 122px ;
}
#imagen-google-plus {
  background: url(http://chezack.tv/wp-content/uploads/2014/05/follow-us-on-google-plus.png) no-repeat right;
  width: 182px ;
  height: 122px ;
}
#imagen-google-plus:hover {
  background-position: left;
  width: 182px ;
  height: 122px ;
}

Muestro a continuación el código del widget.. el problema que tengo es que no se como tengo que coloccar los <div>'s ya que es una plantilla hecha por terceros y no la entiendo muy bien. es el siguiente

Archivo llamado my-banners-widget.php que corresponde con el widget "Cherry Ads125x125":...

Insertar CODE, HTML o PHP:

<?php
class Ad_125_125_Widget extends WP_Widget {

	function Ad_125_125_Widget() {
		$widget_ops = array(
			'classname'   => 'ad_125_125',
			'description' => __('Add 125x125 ads.', CHERRY_PLUGIN_DOMAIN),
			);
		$control_ops = array( 'id_base' => 'ad_125_125-widget' );
		$this->WP_Widget( 'ad_125_125-widget', __( 'Cherry - 125x125 Ads', CHERRY_PLUGIN_DOMAIN ), $widget_ops, $control_ops );
	}
	function widget( $args, $instance ) {
		extract( $args ); ?>
		<ul class="banners clearfix unstyled">
			<?php
				for ( $ad_count = 1; $ad_count <= 4; $ad_count++ ) :
					if ( $instance['ad_125_img_' . $ad_count] && $instance['ad_125_link_' . $ad_count] ) : ?>
					<li class="banners_li">
						<span class="hold">
							<a href="<?php echo $instance['ad_125_link_' . $ad_count]; ?>">
								<img src="<?php echo $instance['ad_125_img_' . $ad_count]; ?>" alt="" class="banners_img">
							</a>
						</span>
					</li>
			<?php
				endif;
				endfor;
			?>
		</ul>
	<?php
	}

	function update( $new_instance, $old_instance ) {
		$instance = $old_instance;

		$instance['ad_125_img_1']  = $new_instance['ad_125_img_1'];
		$instance['ad_125_link_1'] = $new_instance['ad_125_link_1'];
		$instance['ad_125_img_2']  = $new_instance['ad_125_img_2'];
		$instance['ad_125_link_2'] = $new_instance['ad_125_link_2'];
		$instance['ad_125_img_3']  = $new_instance['ad_125_img_3'];
		$instance['ad_125_link_3'] = $new_instance['ad_125_link_3'];
		$instance['ad_125_img_4']  = $new_instance['ad_125_img_4'];
		$instance['ad_125_link_4'] = $new_instance['ad_125_link_4'];

		return $instance;
	}

	function form( $instance ) {
		/* Set up some default widget settings. */
		$defaults = array(
			'ad_125_img_1'  => '',
			'ad_125_link_1' => '',
			'ad_125_img_2'  => '',
			'ad_125_link_2' => '',
			'ad_125_img_3'  => '',
			'ad_125_link_3' => '',
			'ad_125_img_4'  => '',
			'ad_125_link_4' => '',
			);
		$instance = wp_parse_args( (array) $instance, $defaults ); ?>

		<p><strong><?php _e('Ad 1', CHERRY_PLUGIN_DOMAIN); ?></strong></p>
		<p>
			<label for="<?php echo $this->get_field_id('ad_125_img_1'); ?>"><?php _e('Image Ad Link:', CHERRY_PLUGIN_DOMAIN); ?></label>
			<input class="widefat" id="<?php echo $this->get_field_id('ad_125_img_1'); ?>" name="<?php echo $this->get_field_name('ad_125_img_1'); ?>" value="<?php echo $instance['ad_125_img_1']; ?>" type="text" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('ad_125_link_1'); ?>"><?php _e('Ad Link:', CHERRY_PLUGIN_DOMAIN); ?></label>
			<input class="widefat" id="<?php echo $this->get_field_id('ad_125_link_1'); ?>" name="<?php echo $this->get_field_name('ad_125_link_1'); ?>" value="<?php echo $instance['ad_125_link_1']; ?>" type="text" />
		</p>
		<p><strong><?php _e('Ad 2', CHERRY_PLUGIN_DOMAIN); ?></strong></p>
		<p>
			<label for="<?php echo $this->get_field_id('ad_125_img_2'); ?>"><?php _e('Image Ad Link:', CHERRY_PLUGIN_DOMAIN); ?></label>
			<input class="widefat" id="<?php echo $this->get_field_id('ad_125_img_2'); ?>" name="<?php echo $this->get_field_name('ad_125_img_2'); ?>" value="<?php echo $instance['ad_125_img_2']; ?>" type="text" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('ad_125_link_2'); ?>"><?php _e('Ad Link:', CHERRY_PLUGIN_DOMAIN); ?></label>
			<input class="widefat" id="<?php echo $this->get_field_id('ad_125_link_2'); ?>" name="<?php echo $this->get_field_name('ad_125_link_2'); ?>" value="<?php echo $instance['ad_125_link_2']; ?>" type="text" />
		</p>
		<p><strong><?php _e('Ad 3', CHERRY_PLUGIN_DOMAIN); ?></strong></p>
		<p>
			<label for="<?php echo $this->get_field_id('ad_125_img_3'); ?>"><?php _e('Image Ad Link:', CHERRY_PLUGIN_DOMAIN); ?></label>
			<input class="widefat" id="<?php echo $this->get_field_id('ad_125_img_3'); ?>" name="<?php echo $this->get_field_name('ad_125_img_3'); ?>" value="<?php echo $instance['ad_125_img_3']; ?>" type="text" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('ad_125_link_3'); ?>"><?php _e('Ad Link:', CHERRY_PLUGIN_DOMAIN); ?></label>
			<input class="widefat" id="<?php echo $this->get_field_id('ad_125_link_3'); ?>" name="<?php echo $this->get_field_name('ad_125_link_3'); ?>" value="<?php echo $instance['ad_125_link_3']; ?>" type="text" />
		</p>
		<p><strong><?php _e('Ad 4', CHERRY_PLUGIN_DOMAIN); ?></strong></p>
		<p>
			<label for="<?php echo $this->get_field_id('ad_125_img_4'); ?>"><?php _e('Image Ad Link:', CHERRY_PLUGIN_DOMAIN); ?></label>
			<input class="widefat" id="<?php echo $this->get_field_id('ad_125_img_4'); ?>" name="<?php echo $this->get_field_name('ad_125_img_4'); ?>" value="<?php echo $instance['ad_125_img_4']; ?>" type="text" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('ad_125_link_4'); ?>"><?php _e('Ad Link:', CHERRY_PLUGIN_DOMAIN); ?></label>
			<input class="widefat" id="<?php echo $this->get_field_id('ad_125_link_4'); ?>" name="<?php echo $this->get_field_name('ad_125_link_4'); ?>" value="<?php echo $instance['ad_125_link_4']; ?>" type="text" />
		</p>
		<?php
	}
} ?>

Necesito ayuda de los manitas del foro ya que creo que ésta es una pregunta un poco revoltosa. Gracias de antemano señor@s. Tras descubrir este pedazo de foro he cotilleado que hay hasta programadores

, ojalá alguno me eche un cable, mano, lo que pueda. Nos leemos ForoBetas!

OLMID · 7 May 2014

Según el "Example-1" tenemos esta estructura de código html:

HTML:

<ul class="banners clearfix unstyled">
<li class="banners_li">
<span class="hold"> 
<a href=""> <img src="" class="banners_img"> 
</a> 
</span>
</li>
<li class="banners_li">
<span class="hold"> 
<a href=""> <img src="" class="banners_img"> 
</a> 
</span>
</li>
<li class="banners_li">
<span class="hold"> 
<a href=""> <img src="" class="banners_img"> 
</a> 
</span>
</li>
<li class="banners_li">
<span class="hold"> 
<a href=""> <img src="" class="banners_img"> 
</a> 
</span>
</li>
</ul>

Podemos añadir código CSS al final del archivo style.css de tu theme y ver si lo hacemos cambiar

Ejemplo:

HTML:

.banners_li {
  width: 182px ;
  height: 122px ;
  overflow:hidden;
  background-repeat:no-repeat;
  background-position:right;
}
.banners_li:nth-child(1) {
  background: url(http://chezack.tv/wp-content/uploads/2014/05/follow-us-on-youtube.png) no-repeat right;
}
.banners_li:nth-child(2) {
  background: url(http://chezack.tv/wp-content/uploads/2014/05/follow-us-on-twitter.png) no-repeat right;
}
.banners_li:nth-child(3) {
  background: url(http://chezack.tv/wp-content/uploads/2014/05/follow-us-on-facebook.png) no-repeat right;
}
.banners_li:nth-child(4) {
  background: url(http://chezack.tv/wp-content/uploads/2014/05/follow-us-on-google-plus.png) no-repeat right;
}
.banners_li:hover {
  background-position: left;
}
.banners_li a{
  width: 182px ;
  height: 122px ;
  background:transparent;
}
.banners_li img {
opacity:0;
}

Prueba con ese y ya nos dirás

Saludos

SalvaSanchiz · 7 May 2014

Señor OLMID, no quiero ser descortes pero dónde quiere usted el beso? Tu respuesta me ha funcionado, gracias. Has hecho feliz a un joven chaval con su web. Me quedo con la imagen de un foro que vale mucho la pena de verdad, y mira que es el tercero.

Para lo que pueda, ayudaré en base a mis pequeños conocimientos al resto de compañeros.

Saludos!

Problema con cambio de imagen al pasar cursor sobre widget

SalvaSanchiz

OLMID

SalvaSanchiz